@font-face{font-family:CruelMachine;src:url('/fonts/CruelMachine-PKgnB.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:CruelOrnament;src:url('/fonts/CruelMachineOrnament-gxz96.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
:root{--madg-gold:#ffd21a;--madg-black:#0a0a0a}
html{scroll-behavior:smooth} body{background:var(--madg-black);overflow-x:hidden}
header{background:linear-gradient(180deg,rgba(10,10,10,.92),rgba(10,10,10,0))!important}
header nav> a:first-child{display:flex!important;align-items:center;width:78px;height:48px;overflow:hidden;font-size:0!important;letter-spacing:0!important}
header nav> a:first-child img.madg-reference-logo{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 0 5px rgba(255,210,26,.35))}
#home>.relative.mx-auto{grid-template-columns:1fr!important;padding-top:42vh!important}
#home>.relative.mx-auto>div:last-child{display:none!important}
#home h1,#about h2,#about h3{font-family:CruelMachine,'Permanent Marker',cursive!important;letter-spacing:.02em!important}
#home h1{font-size:clamp(3.35rem,8vw,7rem)!important;line-height:.9!important;text-shadow:2px 2px 0 rgba(0,0,0,.35)}
#home h1 span{font-family:CruelMachine,'Permanent Marker',cursive!important}
#about h2,#about h3{color:var(--madg-gold)!important}
/* The first view stops after hero + bio. Other content is opened as a panel. */
main>section#myzon3,main>section#projects,main>section#contact{display:none}
body.madg-panel-open main>section#home,body.madg-panel-open main>section#about{display:none}
body.madg-panel-open main>section#myzon3,body.madg-panel-open main>section#projects,body.madg-panel-open main>section#contact{display:block;min-height:100vh;padding-top:8rem}
.madg-dot-toggle{position:fixed;right:1.25rem;top:1.15rem;z-index:80;width:42px;height:42px;border:1px solid rgba(255,210,26,.6);border-radius:50%;background:rgba(10,10,10,.72);color:var(--madg-gold);display:flex;align-items:center;justify-content:center;font-size:1.55rem;line-height:1;cursor:pointer}
.madg-dot-toggle:hover{background:var(--madg-gold);color:var(--madg-black)}
.madg-dot-panel{position:fixed;right:1.25rem;top:4.2rem;z-index:79;width:min(250px,calc(100vw - 2rem));padding:.6rem;background:rgba(10,10,10,.96);border:1px solid rgba(255,210,26,.45);box-shadow:0 18px 50px rgba(0,0,0,.45);display:none}
.madg-dot-panel.open{display:block}
.madg-dot-panel a{display:flex;align-items:center;gap:.75rem;padding:.82rem .85rem;color:rgba(255,255,255,.82);font-family:'Permanent Marker',cursive;font-size:.78rem;letter-spacing:.04em;border-bottom:1px solid rgba(255,255,255,.08)}
.madg-dot-panel a:last-child{border-bottom:0}.madg-dot-panel a:hover,.madg-dot-panel a.active{color:var(--madg-gold);background:rgba(255,210,26,.08)}
.madg-dot-panel a i{width:8px;height:8px;border-radius:50%;background:var(--madg-gold);display:inline-block;flex:none}
#contact .mx-auto.mt-14 a[href^='mailto:']{display:none!important}
#contact .mt-16 .flex a{min-width:0!important;width:58px;height:58px;padding:0!important;justify-content:center!important;border-left:2px solid var(--madg-gold)!important}
#contact .mt-16 .flex a>span{display:none!important}
#contact .mt-16 .flex a svg{width:24px;height:24px}
#contact .mt-16 .flex{gap:1rem}
@media(max-width:767px){header nav> a:first-child{width:66px;height:42px}header nav> a:first-child img.madg-reference-logo{width:66px;height:66px}.madg-dot-toggle{right:1rem;top:1rem}.madg-dot-panel{right:1rem;top:4rem}#about{padding-top:7rem!important}}

/* Fix: landscape / short-viewport hero sizing so text never overlaps or clips
   against the fixed 42vh top padding on rotated phones. */
@media(max-width:1023px) and (orientation:landscape){
  #home{min-height:100svh!important}
  #home>.relative.mx-auto{padding-top:18vh!important;padding-bottom:6vh!important}
  #home h1{font-size:clamp(2.2rem,7vw,4rem)!important}
}
@media(max-height:480px){
  #home>.relative.mx-auto{padding-top:14vh!important}
  #home h1{font-size:clamp(1.9rem,6vw,3.2rem)!important}
}