/* ==========================================================
   BOY PAPER™ — CORE
========================================================== */

:root{
  --red:#fd0203;
  --pink:#e4b6ef;
  --blue:#d1eaee;
  --black:#000;
  --cream:#f4f3f1
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  max-width:100%
}

body{
  background:var(--cream);
  color:var(--black);
  font-family:"Inter",sans-serif;
  min-height:100vh;
  overflow-x:hidden
}
/* One continuous frame around the complete desktop website */
@media (min-width:901px){
  body::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:650px;
    border-left:2px solid var(--black);
    border-right:2px solid var(--black);
    box-sizing:border-box;
    pointer-events:none;
    z-index:999999
  }
}


/* Cream dotted grid background — original palette */
html{background-color:var(--cream)}

.page{
  width:100%;
  max-width:650px;
  margin:0 auto;
  padding:0 20px 65px;
  background:var(--cream);
  min-height:0
}


/* ==========================================================
   HEADER
========================================================== */

.header{
  width:100%;
  max-width:650px;
  margin:0 auto;
  background:var(--cream);
  color:var(--black);
  text-align:center
}

.mast-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  background:var(--black);
  color:#fff;
  border-bottom:2px solid var(--black);
  font-family:"Anton",sans-serif;
  font-size:11px;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase
}


/* ==========================================================
   LIQUID BOY PAPER LAVA
========================================================== */

.mast-logo{
  position:relative;
  isolation:isolate;
  margin:0;
  padding:0;
  width:100%;
  background:var(--cream);
  overflow:hidden;
  line-height:0;
  height:245px;
}

/* Original animated liquid stays behind the transparent header artwork. */
.mast-logo .lava-svg{
  position:absolute;
  inset:-25%;
  width:150%;
  height:150%;
  z-index:0;
  display:block;
  overflow:visible;
  pointer-events:none
}

/* Keep the original Boy Paper logo centered, with coins free to travel in front of it. */
.mast-logo .original-mast-logo{
  position:absolute;
  z-index:10;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:block;
  width:min(58%, 460px);
  height:82%;
  object-fit:contain;
  object-position:center;
  margin:0;
  padding:0;
  border:0;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  transform-origin:50% 55%;
  animation:boyPaperRubberLogo 4.8s ease-in-out infinite;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.08));
}

@keyframes boyPaperRubberLogo{
  0%,100%{transform:translate(-50%,-50%) scale(1,1) rotate(0deg)}
  18%{transform:translate(-50%,-50%) scale(1.025,.975) rotate(-1deg)}
  36%{transform:translate(-50%,-50%) scale(.985,1.025) rotate(1deg)}
  52%{transform:translate(-50%,-50%) scale(1.015,.99) rotate(-.5deg)}
  68%{transform:translate(-50%,-50%) scale(.995,1.01) rotate(.4deg)}
  82%{transform:translate(-50%,-50%) scale(1.005,.997) rotate(0deg)}
}

.mast-logo .original-mast-logo:hover{
  animation:boyPaperRubberPop .65s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes boyPaperRubberPop{
  0%{transform:translate(-50%,-50%) scale(1,1)}
  25%{transform:translate(-50%,-50%) scale(1.08,.88) rotate(-2deg)}
  48%{transform:translate(-50%,-50%) scale(.92,1.1) rotate(2deg)}
  70%{transform:translate(-50%,-50%) scale(1.04,.97) rotate(-1deg)}
  100%{transform:translate(-50%,-50%) scale(1,1) rotate(0deg)}
}

.coin-field{
  position:absolute;
  inset:0;
  z-index:30;
  overflow:hidden;
  pointer-events:auto;
}

.coin-field img{
  position:absolute;
  left:0;
  top:0;
  display:block;
  width:112px;
  height:112px;
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  object-fit:contain;
  will-change:transform;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:auto;
  cursor:grab;
  touch-action:none;
  transform-origin:center center;
  filter:drop-shadow(0 3px 1px rgba(0,0,0,.14));
}
.coin-field img:active{cursor:grabbing}


/* ==========================================================
   MAST CREDIT
========================================================== */

.mast-credit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:12px 14px;
  background:var(--blue);
  border-top:2px solid var(--black);
  border-bottom:2px solid var(--black)
}

.mast-credit .profile-sticker{
  width:64px;
  height:64px;
  margin:0;
  box-shadow:3px 3px 0 var(--black)
}

.mast-credit-text{
  text-align:left
}

.mast-role{
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.85
}

.mast-name{
  margin-top:3px;
  font-family:"Anton",sans-serif;
  font-size:30px;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase
}

.mast-tagline{
  padding:11px 14px;
  background:var(--pink);
  border-bottom:2px solid var(--black);
  font-family:"Anton",sans-serif;
  font-size:15px;
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase
}

.logo{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin:0 auto
}

.logo img{
  display:block;
  width:min(420px,88vw);
  height:auto;
  max-height:110px;
  object-fit:contain;
  transform-origin:center;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  animation:boyPaperRubber 2.8s ease-in-out infinite
}

@keyframes boyPaperRubber{
  0%{transform:scale3d(1,1,1) rotate(0)}
  8%{transform:scale3d(1.08,.94,1) rotate(-1deg)}
  16%{transform:scale3d(.94,1.07,1) rotate(1deg)}
  24%{transform:scale3d(1.05,.97,1) rotate(-.6deg)}
  32%{transform:scale3d(.97,1.04,1) rotate(.5deg)}
  42%{transform:scale3d(1.02,.99,1) rotate(0)}
  55%,100%{transform:scale3d(1,1,1) rotate(0)}
}


/* ==========================================================
   PROFILE
========================================================== */

.profile-wrap{
  text-align:center;
  margin-top:12px
}

.profile-sticker{
  position:relative;
  width:76px;
  height:76px;
  margin:0 auto 9px;
  overflow:hidden;
  border-radius:42% 58% 52% 48%/48% 43% 57% 52%;
  border:2px solid var(--black);
  background:var(--pink);
  box-shadow:4px 4px 0 var(--black);
  transform:rotate(-4deg);
  animation:fioriFloat 3.2s ease-in-out infinite;
  transition:transform .25s ease,box-shadow .25s ease
}

.profile-sticker:hover{
  transform:rotate(3deg) scale(1.08);
  box-shadow:6px 6px 0 var(--black)
}

.profile-sticker img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none
}

@keyframes fioriFloat{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  25%{transform:translateY(-3px) rotate(-1deg)}
  50%{transform:translateY(0) rotate(3deg)}
  75%{transform:translateY(-2px) rotate(0)}
}

.profile-intro{
  max-width:330px;
  margin:10px auto 12px;
  text-align:center
}

.profile-intro h2{
  font-family:"Anton",sans-serif;
  font-size:20px;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase
}

.tagline{
  margin:13px auto 0;
  max-width:300px;
  font-size:12px;
  line-height:1.5
}


/* ==========================================================
   SOCIALS
========================================================== */

.socials{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin:22px 0 18px
}

.social{
  padding:7px 12px;
  border:1px solid var(--black);
  color:var(--black);
  text-decoration:none;
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:.2s ease
}

.social:hover{
  background:var(--black);
  color:var(--cream)
}


/* ==========================================================
   PLAY HINT
========================================================== */

.play-hint{
  text-align:center;
  margin:0 auto 24px;
  font-size:8px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.65
}

.play-hint span{
  display:inline-block;
  padding:7px 12px;
  border:1px dashed rgba(0,0,0,.35);
  border-radius:999px
}


/* ==========================================================
   PHOTOCARDS
========================================================== */

.cards{
  position:relative;
  width:100%;
  height:1250px
}

.card{
  position:absolute;
  width:180px;
  height:280px;
  left:50%;
  top:0;
  border-radius:12px;
  perspective:1200px;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  --x:0px;
  --y:0px;
  --r:0deg;
  transform:translate(calc(-50% + var(--x)),var(--y)) rotate(var(--r));
  z-index:1
}

.card:nth-child(1){
  --x:-100px;
  --y:0px;
  --r:-8deg
}

.card:nth-child(2){
  --x:92px;
  --y:28px;
  --r:6deg
}

.card:nth-child(3){
  --x:-82px;
  --y:306px;
  --r:-5deg
}

.card:nth-child(4){
  --x:96px;
  --y:340px;
  --r:8deg
}

.card:nth-child(5){
  --x:-98px;
  --y:615px;
  --r:-7deg
}

.card:nth-child(6){
  --x:88px;
  --y:650px;
  --r:4deg
}

.card:nth-child(7){
  --x:8px;
  --y:940px;
  --r:-4deg
}

.card.dragging{
  cursor:grabbing;
  z-index:9999!important;
  filter:drop-shadow(0 18px 25px rgba(0,0,0,.22))
}

.card-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .6s ease;
  border-radius:12px
}

.card.flipped .card-inner{
  transform:rotateY(180deg)
}

.card-front,
.card-back{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  border:none;
  outline:none;
  border-radius:12px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden
}

.card-front{
  position:relative;
  background:#111
}

.card-front>img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
  pointer-events:none
}

.front-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:10px;
  color:#fff;
  border-radius:12px;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.25),
    transparent 25%,
    transparent 73%,
    rgba(0,0,0,.38)
  );
  pointer-events:none
}

.front-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:7px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}

.front-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:7px
}

.actor-name{
  font-family:"Anton",sans-serif;
  font-size:1rem;
  line-height:.95;
  text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.65)
}

.flip-hint{
  font-size:7px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.65)
}


/* ==========================================================
   SHINE
========================================================== */

.card-front::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,.2) 50%,
    transparent 60%
  );
  transform:translateX(-120%);
  pointer-events:none;
  border-radius:12px
}

@media (hover:hover){
  .card:not(.dragging):hover .card-front::after{
    animation:shine .9s forwards
  }
}

@keyframes shine{
  to{transform:translateX(120%)}
}


/* ==========================================================
   KISS
========================================================== */

.card-kiss{
  position:absolute;
  z-index:20;
  width:150px;
  height:150px;
  left:50%;
  top:48%;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.25) rotate(-15deg);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))
}

.card-kiss img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}

@media (hover:hover) and (pointer:fine){
  .card:not(.dragging):hover .card-kiss{
    animation:cardKiss 1.1s cubic-bezier(.2,.8,.25,1) forwards
  }
}

@media (hover:none) and (pointer:coarse){
  .card.mobile-kiss .card-kiss{
    animation:cardKiss 1.1s cubic-bezier(.2,.8,.25,1) forwards
  }
}

.card.dragging .card-kiss{
  opacity:1;
  animation:dragKiss .7s ease-out infinite alternate
}

@keyframes dragKiss{
  0%{
    opacity:1;
    transform:translate(-50%,-50%) scale(.8) rotate(-8deg)
  }
  100%{
    opacity:1;
    transform:translate(-50%,-65%) scale(1) rotate(8deg)
  }
}

@keyframes cardKiss{
  0%{
    opacity:0;
    transform:translate(-50%,-30%) scale(.2) rotate(-18deg)
  }
  12%{
    opacity:1;
    transform:translate(-50%,-48%) scale(1.08) rotate(8deg)
  }
  25%{
    opacity:1;
    transform:translate(-50%,-52%) scale(.95) rotate(-4deg)
  }
  45%{
    opacity:1;
    transform:translate(-50%,-68%) scale(1) rotate(5deg)
  }
  70%{
    opacity:.8;
    transform:translate(-50%,-92%) scale(.85) rotate(12deg)
  }
  100%{
    opacity:0;
    transform:translate(-50%,-120%) scale(.65) rotate(18deg)
  }
}


/* ==========================================================
   CARD BACK
========================================================== */

.card-back{
  transform:rotateY(180deg);
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--red)
}

.card:nth-child(2) .card-back,
.card:nth-child(5) .card-back,
.card:nth-child(7) .card-back{
  background:var(--pink)
}

.card:nth-child(3) .card-back,
.card:nth-child(6) .card-back{
  background:var(--blue)
}

.card:nth-child(4) .card-back{
  background:var(--black);
  color:var(--cream)
}

.back-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:7px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}

.back-main{
  margin-top:auto;
  margin-bottom:auto
}

.back-title{
  font-family:"Anton",sans-serif;
  font-size:2.25rem;
  line-height:1.05;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin-bottom:14px
}

.back-description{
  max-width:155px;
  font-size:9px;
  line-height:1.5
}

.back-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:9px;
  border:1px solid currentColor;
  background:transparent;
  color:inherit;
  font-family:"Inter",sans-serif;
  font-size:7px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:.2s ease
}

.back-link:hover{
  background:var(--black);
  color:var(--cream);
  border-color:var(--black)
}


/* ==========================================================
   FOOTER
========================================================== */

.link-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2px;
  background:var(--black);
  border-top:2px solid var(--black);
  border-bottom:2px solid var(--black)
}

.top-link-grid{
  width:100%;
  margin:0;
}

.important-links-cell .link-cell-name{
  font-size:clamp(13px,2.2vw,22px);
  overflow-wrap:anywhere;
}

.link-cell{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:26px;
  min-width:0;
  min-height:132px;
  padding:12px 14px;
  color:var(--black);
  text-align:left;
  text-decoration:none;
  transition:box-shadow .2s ease
}

.link-cell:nth-child(1){background:var(--red)}
.link-cell:nth-child(2){background:var(--pink)}
.link-cell:nth-child(3){background:var(--blue)}


.link-cell:hover{
  box-shadow:inset 0 0 0 4px var(--black)
}

.link-cell-kicker{
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase
}

.link-cell-name{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:4px;
  font-family:"Anton",sans-serif;
  font-size:clamp(18px,3.1vw,30px);
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase
}

.link-cell-arrow{
  display:inline-block;
  transition:transform .2s ease
}

.link-cell:hover .link-cell-arrow,
.profile-contact-link:hover .link-cell-arrow{
  transform:translate(3px,-3px)
}

@media (min-width:600px){
  .link-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))
  }

  .link-cell{
    min-height:145px
  }
}

.important-links-list{
  display:grid;
  gap:0;
}

.important-links-list a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px 2px;
  border-bottom:1px solid rgba(0,0,0,.2);
  color:var(--black);
  font-weight:700;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.important-links-list a:last-child{border-bottom:0}
.important-links-list a:hover{padding-left:8px;background:var(--blue)}

.footer{
  width:100%;
  max-width:650px;
  margin:0 auto;
  background:var(--black);
  color:var(--cream);
  text-align:center
}

/* Footer coins overlay the existing footer; they do not add height. */
.footer{
  position:relative;
  overflow:hidden;
}
.footer-coin-field{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:transparent;
  z-index:3;
  pointer-events:none;
}
.footer-coin-field img{
  opacity:1;
  pointer-events:auto;
}

.footer-text{
  position:relative;
  z-index:2;
  padding:34px 20px 30px
}

.footer-big{
  max-width:340px;
  margin:0 auto;
  font-family:"Anton",sans-serif;
  font-size:28px;
  line-height:1.05;
  letter-spacing:.01em;
  text-transform:uppercase
}

.footer-big span{
  color:var(--pink)
}

.footer-heart{
  margin:16px 0 14px;
  font-size:16px;
  color:var(--red)
}

.footer-small{
  font-size:8px;
  font-weight:700;
  line-height:1.9;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.75
}


/* ==========================================================
   POPUP WINDOWS
========================================================== */

.popup{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  height:100dvh;
  overscroll-behavior:contain;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.16);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px)
}

.popup.active{
  display:flex
}

.popup-inner{
  position:relative;
  width:100%;
  max-width:460px;
  max-height:min(620px,calc(100vh - 40px));
  max-height:min(620px,calc(100dvh - 40px));
  overflow:auto;
  background:var(--cream);
  color:var(--black);
  border:1px solid var(--black);
  box-shadow:7px 7px 0 var(--black)
}

.popup-header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:34px;
  padding:7px 8px 7px 10px;
  background:var(--blue);
  border-bottom:1px solid var(--black)
}

.popup-header>div:first-child{
  min-width:0
}

.popup-title{
  font-family:"Anton",sans-serif;
  font-size:17px;
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase
}

.popup-subtitle{
  margin-top:3px;
  max-width:330px;
  font-size:7px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.06em;
  text-transform:uppercase
}

.popup-close{
  width:22px;
  height:22px;
  flex-shrink:0;
  border:1px solid var(--black);
  background:var(--cream);
  color:var(--black);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center
}

.popup-close:hover{
  background:var(--red)
}

.popup-body{
  padding:18px
}


/* ==========================================================
   ABOUT
========================================================== */

.about-popup-inner{
  max-width:470px
}

.about-window-intro{
  padding:16px;
  background:var(--cream);
  border-bottom:1px solid var(--black)
}

.about-window-name{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px
}

.about-window-name h1{
  font-family:"Anton",sans-serif;
  font-size:31px;
  line-height:.9;
  text-transform:uppercase
}

.about-online{
  padding:4px 6px;
  background:var(--red);
  border:1px solid var(--black);
  box-shadow:2px 2px 0 var(--black);
  font-size:6px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  white-space:nowrap
}

.about-window-copy{
  font-size:10px;
  line-height:1.55
}

.about-window-copy strong{
  font-weight:700
}

.about-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--black)
}

.about-tab{
  min-height:31px;
  padding:7px 5px;
  border:0;
  border-right:1px solid var(--black);
  background:var(--pink);
  color:var(--black);
  font-family:"Inter",sans-serif;
  font-size:7px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer
}

.about-tab:last-child{
  border-right:0
}

.about-tab:nth-child(2n){
  background:var(--blue)
}

.about-tab.active,
.about-tab:hover{
  background:var(--black);
  color:var(--cream)
}

.about-panel{
  display:none;
  padding:16px
}

.about-panel.active{
  display:block
}

.about-panel-title{
  margin-bottom:9px;
  font-family:"Anton",sans-serif;
  font-size:24px;
  line-height:.95;
  text-transform:uppercase
}

.about-list{
  display:grid;
  gap:0;
  border-top:1px solid var(--black)
}

.about-list-row{
  display:grid;
  grid-template-columns:105px 1fr;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--black)
}

.about-list-label{
  font-size:7px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}

.about-list-value{
  font-size:9px;
  line-height:1.45
}

.about-quote{
  padding:13px;
  background:var(--blue);
  border:1px solid var(--black);
  box-shadow:4px 4px 0 var(--black);
  font-family:"Anton",sans-serif;
  font-size:19px;
  line-height:1;
  text-transform:uppercase
}

.about-status{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  padding:9px 16px;
  border-top:1px dashed rgba(0,0,0,.45);
  font-size:6px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase
}

.about-status span{
  padding:4px 5px;
  border:1px solid var(--black);
  background:var(--cream)
}


/* ==========================================================
   CRUSHES
========================================================== */

.crush-window-note{
  padding:11px 14px;
  background:var(--pink);
  border-bottom:1px solid var(--black);
  font-size:8px;
  line-height:1.45
}

.crush-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  padding:13px
}

.crush-item{
  display:block;
  min-width:0;
  color:var(--black);
  text-decoration:none
}

.crush-photo{
  position:relative;
  width:100%;
  aspect-ratio:1/1.35;
  overflow:hidden;
  border:1px solid var(--black);
  background:var(--black)
}

.crush-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .25s ease
}

.crush-item:hover .crush-photo img{
  transform:scale(1.05)
}

.crush-name{
  margin-top:5px;
  font-family:"Anton",sans-serif;
  font-size:10px;
  line-height:1;
  text-transform:uppercase
}

.crush-handle{
  margin-top:3px;
  font-size:6px;
  font-weight:600;
  letter-spacing:.03em
}

.crush-footer{
  padding:9px 13px 13px;
  border-top:1px dashed rgba(0,0,0,.4);
  font-size:6px;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.4;
  text-transform:uppercase
}


/* ==========================================================
   WORKS
========================================================== */

.works-popup-inner{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  height:min(620px,calc(100vh - 40px));
  height:min(620px,calc(100dvh - 40px))
}

.works-popup-inner .popup-header{
  position:relative;
  flex-shrink:0
}

.works-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain
}

.work-slide{
  position:relative;
  height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 14px 34px;
  background:var(--cream);
  border-bottom:1px solid var(--black)
}

.work-slide:last-child{
  border-bottom:0
}

.work-slide img{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border:1px solid var(--black);
  box-shadow:4px 4px 0 var(--black);
  -webkit-user-drag:none
}

.work-count{
  position:absolute;
  left:0;
  right:0;
  bottom:11px;
  text-align:center;
  font-size:7px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.7
}


/* ==========================================================
   CONTACT
========================================================== */

.contact-window-intro{
  padding:12px 15px;
  background:var(--pink);
  border-bottom:1px solid var(--black);
  font-size:8px;
  line-height:1.5
}

.contact-form{
  width:100%
}

.form-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}

.field{
  margin-bottom:11px
}

.field label{
  display:block;
  margin-bottom:6px;
  font-size:7px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}

.field input,
.field textarea,
.field select{
  width:100%;
  border:1px solid var(--black);
  border-radius:0;
  padding:10px;
  background:rgba(255,255,255,.25);
  color:var(--black);
  font-family:"Inter",sans-serif;
  font-size:9px;
  outline:none;
  transition:.2s ease
}

.field input,
.field select{
  height:38px
}

.field textarea{
  min-height:105px;
  resize:vertical
}

.field input:focus,
.field textarea:focus,
.field select:focus{
  background:#fff;
  box-shadow:3px 3px 0 var(--pink)
}

.submit-button{
  width:100%;
  margin-top:3px;
  padding:11px;
  border:1px solid var(--black);
  background:var(--red);
  color:var(--black);
  font-family:"Anton",sans-serif;
  font-size:17px;
  letter-spacing:.02em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.2s ease
}

.submit-button:hover{
  background:var(--black);
  color:var(--cream);
  transform:translateY(-2px)
}

.form-note{
  margin-top:9px;
  font-size:7px;
  line-height:1.5;
  text-align:center;
  opacity:.65
}


/* ==========================================================
   MOBILE
========================================================== */


@media (min-width:481px) and (max-width:900px){
  .header,.page,.footer{
    max-width:min(650px,calc(100% - 32px))
  }
}

@media (max-width:480px){

  body{
    background:var(--cream);
    background-image:none
  }

  body::after{
    display:none
  }

  .header,.page,.footer{
    max-width:100%
  }

  .page{
    padding:0 10px 50px
  }

  .logo img{
    width:min(270px,76vw)
  }

  .profile-sticker{
    width:72px;
    height:72px
  }

  .top-link-grid .link-cell-name{
    font-size:clamp(12px,3.1vw,22px)
  }

  .top-link-grid .link-cell-kicker{
    font-size:clamp(6px,1.3vw,8px);
    letter-spacing:.025em
  }

  .top-link-grid .link-cell{
    padding:8px 5px;
    min-height:100px;
    gap:12px
  }

  .cards{
    height:1520px
  }

  .card:nth-child(1){
    --x:-91px;
    --y:0px
  }

  .card:nth-child(2){
    --x:91px;
    --y:22px
  }

  .card:nth-child(3){
    --x:-85px;
    --y:300px
  }

  .card:nth-child(4){
    --x:85px;
    --y:320px
  }

  .card:nth-child(5){
    --x:-91px;
    --y:600px
  }

  .card:nth-child(6){
    --x:91px;
    --y:620px
  }

  .card:nth-child(7){
    --x:-82px;
    --y:920px
  }

  .card:nth-child(8){
    --x:82px;
    --y:945px;
    --r:7deg
  }

  .card:nth-child(9){
    --x:0px;
    --y:1240px;
    --r:-5deg
  }

  .popup{
    padding:12px
  }

  .popup-inner{
    max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px);
    box-shadow:5px 5px 0 var(--black)
  }

  .works-popup-inner{
    height:calc(100vh - 24px);
    height:calc(100dvh - 24px)
  }

  .popup-close{
    width:32px;
    height:32px;
    font-size:22px
  }

  .mast-top{
    font-size:9px
  }

  .mast-logo{
    height:195px
  }

  .mast-name{
    font-size:24px
  }

  .mast-tagline{
    font-size:12px
  }

  .popup-title{
    font-size:15px
  }

  .popup-subtitle{
    max-width:220px;
    font-size:6px
  }

  .about-window-name{
    align-items:flex-start;
    flex-direction:column;
    gap:7px
  }

  .about-window-name h1{
    font-size:28px
  }

  .about-list-row{
    grid-template-columns:88px 1fr
  }

  .about-list-label{
    font-size:6px
  }

  .about-list-value{
    font-size:8px
  }

  .crush-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:11px
  }

  .form-row{
    grid-template-columns:1fr;
    gap:0
  }
}

@media (max-width:360px){

  .card:nth-child(1),
  .card:nth-child(5){
    --x:-82px
  }

  .card:nth-child(2),
  .card:nth-child(6){
    --x:82px
  }

  .card:nth-child(3){
    --x:-78px
  }

  .card:nth-child(4){
    --x:78px
  }
}


/* ==========================================================
   FINAL FIX — CONTINUOUS CREAM CANVAS
   Dots belong only in the outer desktop margins.
========================================================== */

@media (min-width:901px){
  body{
    position:relative;
    isolation:isolate;
    background-color:#e4e2de;
    background-image:radial-gradient(rgba(0,0,0,.20) .8px,transparent .8px);
    background-size:10px 10px;
  }

  body::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:650px;
    background:var(--cream);
    pointer-events:none;
    z-index:-1;
  }

  body::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:650px;
    border-left:2px solid var(--black);
    border-right:2px solid var(--black);
    box-sizing:border-box;
    pointer-events:none;
    z-index:999999;
  }
}

@media (min-width:481px) and (max-width:900px){
  body{
    position:relative;
    isolation:isolate;
    background-color:#e4e2de;
    background-image:radial-gradient(rgba(0,0,0,.20) .8px,transparent .8px);
    background-size:10px 10px;
  }

  body::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:min(650px,calc(100% - 32px));
    background:var(--cream);
    pointer-events:none;
    z-index:-1;
  }

  body::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:min(650px,calc(100% - 32px));
    border-left:2px solid var(--black);
    border-right:2px solid var(--black);
    box-sizing:border-box;
    pointer-events:none;
    z-index:999999;
  }
}

@media (max-width:480px){
  body{
    background:var(--cream);
    background-image:none;
  }

  body::before,
  body::after{
    display:none;
  }
}


/* ==========================================================
   BUY ME RAMYEON POPUP — keeps the existing Boy Paper window style
========================================================== */

.ramen-popup-inner{
  width:min(100%, 460px);
  max-width:460px;
  max-height:min(760px, calc(100dvh - 40px));
  overflow:hidden;
  display:flex;
  flex-direction:column
}

.ramen-popup-inner .popup-header{
  position:relative;
  flex-shrink:0
}

.ramen-popup-frame{
  display:block;
  width:100%;
  height:min(680px, calc(100dvh - 105px));
  min-height:420px;
  border:0;
  background:var(--cream)
}

@media(max-width:520px){
  .ramen-popup-inner{
    width:100%;
    max-height:calc(100dvh - 24px)
  }
  .ramen-popup-frame{
    height:calc(100dvh - 100px);
    min-height:360px
  }
}


/* ==========================================================
   SIGN MY GUESTBOOK POPUP
========================================================== */

.guestbook-popup-inner{
  width:min(100%, 650px);
  max-width:650px;
  max-height:min(820px, calc(100dvh - 40px));
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.guestbook-popup-inner .popup-header{
  position:relative;
  flex-shrink:0;
}

.guestbook-popup-frame{
  display:block;
  width:100%;
  height:min(680px, calc(100dvh - 115px));
  min-height:420px;
  border:0;
  background:var(--cream, #f4f3f1);
}

@media(max-width:520px){
  .guestbook-popup-inner{
    width:100%;
    max-height:calc(100dvh - 24px);
  }
  .guestbook-popup-frame{
    height:calc(100dvh - 100px);
    min-height:360px;
  }
}


/* Floating collectible coins in the original liquid header */
@media (max-width:600px){
  .coin-field img{width:84px;height:84px}
}
@media (prefers-reduced-motion:reduce){
  .coin-field img{will-change:auto}
  .mast-logo .original-mast-logo{width:min(70%, 390px);height:76%}
}


/* ==========================================================
   DESKTOP CARD COMPOSITION + FRAME LAYER FIX
   Desktop only: three cards per row, mobile layout unchanged.
========================================================== */
@media (min-width:901px){
  .cards{
    height:1010px;
    position:relative;
    z-index:3;
  }

  .card{
    width:190px;
    height:295px;
  }

  .card:nth-child(1){--x:-285px;--y:4px;--r:-9deg}
  .card:nth-child(2){--x:0px;--y:24px;--r:6deg}
  .card:nth-child(3){--x:285px;--y:0px;--r:-7deg}
  .card:nth-child(4){--x:-270px;--y:355px;--r:8deg}
  .card:nth-child(5){--x:0px;--y:375px;--r:-6deg}
  .card:nth-child(6){--x:270px;--y:345px;--r:9deg}
  .card:nth-child(7){--x:-285px;--y:710px;--r:-7deg}
  .card:nth-child(8){--x:0px;--y:735px;--r:8deg}
  .card:nth-child(9){--x:285px;--y:700px;--r:-9deg}

  /* The frame lines stay behind the cards, including while dragging. */
  body::after{z-index:2}
}


/* Card hover wiggle — keeps the card's existing position and preserves the kiss effect. */
@media (hover:hover) and (pointer:fine){
  .card:not(.dragging):hover{
    animation:boyPaperCardWiggle .42s ease-in-out infinite;
    transform-origin:50% 50%;
  }
}

/* Touch devices have no hover, so trigger a short wiggle when a card is tapped. */
@media (hover:none) and (pointer:coarse){
  .card.mobile-wiggle:not(.dragging){
    animation:boyPaperCardWiggle .42s ease-in-out 1;
    transform-origin:50% 50%;
  }
}

@keyframes boyPaperCardWiggle{
  0%,100%{transform:translate(calc(-50% + var(--x)),var(--y)) rotate(var(--r))}
  25%{transform:translate(calc(-50% + var(--x)),var(--y)) rotate(calc(var(--r) - 2deg))}
  50%{transform:translate(calc(-50% + var(--x)),var(--y)) rotate(calc(var(--r) + 2deg))}
  75%{transform:translate(calc(-50% + var(--x)),var(--y)) rotate(calc(var(--r) - 1.2deg))}
}

@media (prefers-reduced-motion:reduce){
  .card:not(.dragging):hover{animation:none}
}

/* Studio menu cards: clickable pop-up triggers, with drag layers above the frame. */
.card[data-popup]{cursor:grab; z-index:4}
.card[data-popup]:focus-visible{outline:3px solid #fd0203;outline-offset:4px}
.card.dragging{z-index:999999!important}
.services-list p{padding:12px 0;border-bottom:1px solid rgba(0,0,0,.16)}


/* ==========================================================
   TOP PROFILE + EMAIL / TELEGRAM ROW
   ========================================================== */
.profile-contact-row{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(220px,1fr);
  align-items:stretch;
  border-top:2px solid var(--black);
  border-bottom:2px solid var(--black);
  background:var(--blue);
}
.profile-contact-row .mast-credit{
  justify-content:flex-start;
  min-width:0;
  padding:12px 14px;
  border:0;
  background:var(--blue);
}
.profile-contact-row .mast-credit .profile-sticker{
  flex:0 0 64px;
}
.mast-inline-tagline{
  margin-top:6px;
  font-size:10px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.profile-contact-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  min-width:0;
  border-left:2px solid var(--black);
}
.profile-contact-link{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  min-width:0;
  padding:12px 14px;
  color:var(--black);
  text-decoration:none;
  transition:filter .2s ease;
}
.profile-contact-link + .profile-contact-link{border-left:2px solid var(--black)}
.profile-contact-link.email-link{background:var(--red)}
.profile-contact-link.telegram-link{background:var(--pink)}
.profile-contact-link:hover{filter:brightness(.94)}
.profile-contact-kicker{font-size:10px;font-weight:700;letter-spacing:.1em}
.profile-contact-name{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;margin-top:auto;font-family:"Anton",sans-serif;font-size:clamp(17px,2.2vw,27px);line-height:1;text-transform:uppercase}
.profile-contact-name span{font-family:Arial,sans-serif;font-size:18px;display:inline-block;transition:transform .2s ease}
.profile-contact-link:hover .profile-contact-name span{transform:translate(3px,-3px)}
@media(max-width:599px){
  .profile-contact-row{grid-template-columns:minmax(0,1fr)}
  .profile-contact-row .mast-credit{padding:10px 12px}
  .profile-contact-row .mast-name{font-size:25px}
  .profile-contact-links{border-left:0;border-top:2px solid var(--black);min-height:84px}
  .profile-contact-link{padding:10px 12px;gap:10px}
}


/* RESTORED FOUR-COLUMN FOOTER SOCIAL TILES */
.footer-socials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--black);border-bottom:2px solid var(--black);}
.footer-social{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-width:0;min-height:112px;padding:14px 12px;color:var(--black);text-decoration:none;border-right:2px solid var(--black);transition:filter .2s ease;}
.footer-social:last-child{border-right:0}
.footer-social-insta{background:var(--red)}.footer-social-x{background:var(--pink)}.footer-social-pinterest{background:var(--blue)}.footer-social-linkedin{background:var(--cream)}
.footer-social-kicker{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.footer-social-name{font-family:'Anton',sans-serif;font-size:clamp(16px,2.2vw,27px);line-height:1;text-transform:uppercase;overflow-wrap:anywhere;padding-right:4px}
.footer-social-arrow{position:absolute;right:12px;bottom:12px;font:26px/1 Arial,sans-serif;pointer-events:none}
.footer-social:hover{filter:brightness(.94)}
.profile-contact-name{font-size:clamp(16px,1.8vw,23px);white-space:nowrap;}
.profile-contact-name span{font-size:16px;flex:0 0 auto;}
@media(max-width:599px){.footer-social{padding:10px 7px;min-height:90px;gap:10px}.footer-social-kicker{font-size:8px}.footer-social-name{font-size:clamp(12px,3vw,17px)}.footer-social-arrow{right:6px;bottom:8px;font-size:18px}.profile-contact-name{font-size:clamp(15px,4vw,22px)}}

/* FIX: keep the four footer social tiles inside the same 650px site frame */
.footer-socials{
  width:100%;
  max-width:650px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  position:relative;
  box-sizing:border-box;
}
.footer-social{
  min-width:0;
  width:100%;
  box-sizing:border-box;
}
.footer-social-arrow{
  right:10px;
  bottom:10px;
  line-height:1;
  display:block;
}
@media(max-width:480px){
  .footer-socials{grid-template-columns:repeat(4,minmax(0,1fr));}
  .footer-social{padding:10px 6px;}
  .footer-social-arrow{right:5px;bottom:7px;font-size:17px;}
}


/* BLACK-AND-WHITE PROFILE MARQUEE */
.profile-tagline-marquee{
  width:100%;
  overflow:hidden;
  background:#000;
  color:#fff;
  border-top:2px solid #000;
  border-bottom:2px solid #000;
  white-space:nowrap;
  font-family:"Anton",sans-serif;
  font-size:clamp(12px,1.8vw,17px);
  line-height:1;
  letter-spacing:.035em;
  padding:10px 0;
}
.profile-tagline-track{
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:24px;
  width:max-content;
  min-width:100%;
  animation:boyPaperTaglineScroll 22s linear infinite;
}
.profile-tagline-track span{flex:0 0 auto}
.profile-tagline-track .marquee-star{font-family:Arial,sans-serif;font-size:.9em}
@keyframes boyPaperTaglineScroll{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
@media(prefers-reduced-motion:reduce){.profile-tagline-track{animation:none;width:100%;justify-content:space-around;gap:8px}.profile-tagline-track span:nth-of-type(n+2){display:none}}


/* ==========================================================
   DESKTOP BREATHING ROOM — intentionally loose photocard layout
========================================================== */
@media (min-width:901px){
  body::before,
  body::after{width:900px;}

  .header,
  .page,
  .footer,
  .footer-socials{
    width:100%;
    max-width:900px;
  }

  .page{padding-left:28px;padding-right:28px;}

  .cards{
    width:100%;
    max-width:860px;
    height:1010px;
    margin:0 auto;
    position:relative;
    z-index:3;
  }

  .card{width:190px;height:295px;}
  .card:nth-child(1){--x:-285px;--y:4px;--r:-9deg}
  .card:nth-child(2){--x:0px;--y:24px;--r:6deg}
  .card:nth-child(3){--x:285px;--y:0px;--r:-7deg}
  .card:nth-child(4){--x:-270px;--y:355px;--r:8deg}
  .card:nth-child(5){--x:0px;--y:375px;--r:-6deg}
  .card:nth-child(6){--x:270px;--y:345px;--r:9deg}
  .card:nth-child(7){--x:-285px;--y:710px;--r:-7deg}
  .card:nth-child(8){--x:0px;--y:735px;--r:8deg}
  .card:nth-child(9){--x:285px;--y:700px;--r:-9deg}
}

/* Tablet and mobile layouts intentionally retain their existing arrangement. */


/* Keep external-link arrows in text presentation, including on mobile. */
.link-cell-arrow, .footer-social-arrow { font-variant-emoji: text; }

/* Mobile card composition fix: balanced two-column stagger, with the final card centered. */
@media (max-width:480px){
  .cards{height:1510px; overflow:visible;}
  .card{width:180px;height:280px;}
  .card:nth-child(1){--x:-86px;--y:0px;--r:-7deg;}
  .card:nth-child(2){--x:86px;--y:8px;--r:6deg;}
  .card:nth-child(3){--x:-86px;--y:300px;--r:-5deg;}
  .card:nth-child(4){--x:86px;--y:310px;--r:7deg;}
  .card:nth-child(5){--x:-86px;--y:600px;--r:-6deg;}
  .card:nth-child(6){--x:86px;--y:610px;--r:5deg;}
  .card:nth-child(7){--x:-86px;--y:900px;--r:-5deg;}
  .card:nth-child(8){--x:86px;--y:910px;--r:7deg;}
  .card:nth-child(9){--x:0px;--y:1210px;--r:-4deg;}
}

/* ==========================================================
   MOBILE PERFORMANCE — keep the header still, coins stay playful
   Only applies at 600px and below. Desktop remains unchanged.
========================================================== */
@media (max-width:600px){
  /* The liquid SVG is paused by script.js on mobile. */
  .mast-logo .original-mast-logo,
  .mast-logo .original-mast-logo:hover{
    animation:none !important;
    transform:translate(-50%,-50%) !important;
  }

  /* Shadows are expensive to repaint while all nine coins move. */
  .coin-field img{
    filter:none;
  }
}


/* ==========================================================
   BOY PAPER × SUGUPTA-INSPIRED EDITORIAL REDESIGN
   Layout and styling only: original cards, popups, coins and JS remain.
========================================================== */
:root{
  --bp-grid:#e4e2de;
  --bp-rule:2px solid var(--black);
  --bp-page-width:1180px;
}

html,body{max-width:100%;}
body{
  position:relative;
  isolation:isolate;
  background:var(--cream);
}

/* The dotted greige surround frames a wider cream editorial canvas. */
@media (min-width:481px){
  body{
    background-color:var(--bp-grid)!important;
    background-image:radial-gradient(rgba(0,0,0,.20) .8px,transparent .8px)!important;
    background-size:10px 10px!important;
  }
  body::before{
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    top:0;bottom:0;left:50%;
    transform:translateX(-50%);
    width:min(var(--bp-page-width),calc(100% - 32px));
    background:var(--cream);
    pointer-events:none;
  }
  body::after{
    content:"";
    display:block;
    position:absolute;
    z-index:0;
    top:0;bottom:0;left:50%;
    transform:translateX(-50%);
    width:min(var(--bp-page-width),calc(100% - 32px));
    border-left:var(--bp-rule);
    border-right:var(--bp-rule);
    pointer-events:none;
  }
}

.header,.page,.footer,.footer-socials{
  width:100%;
  max-width:var(--bp-page-width);
}
/* Keep the frame visible, while allowing cards to pass over its lines. */
.header,.page,.footer{position:relative;z-index:auto;}
.header,.page{background:var(--cream);}

/* Hero: keep the existing liquid SVG, logo and all nine moving coins. */
.mast-top{
  min-height:42px;
  padding:12px 22px;
  font-size:12px;
  letter-spacing:.12em;
}
.mast-logo{
  height:clamp(300px,34vw,430px);
  border-bottom:var(--bp-rule);
}
.mast-logo .original-mast-logo{
  width:min(66%,760px);
  height:84%;
}

/* Scrolling headline becomes a strong graphic band. */
.profile-tagline-marquee{
  padding:14px 0;
  background:var(--red);
  color:var(--black);
  border-top:0;
  border-bottom:var(--bp-rule);
  font-size:clamp(15px,1.8vw,22px);
  letter-spacing:.045em;
}
.profile-tagline-track{gap:30px;}

/* Profile and contact are editorial color panels rather than small profile metadata. */
.profile-contact-row{
  grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);
  min-height:150px;
  border-top:0;
  border-bottom:var(--bp-rule);
}
.profile-contact-row .mast-credit{padding:22px 28px;gap:18px;}
.profile-contact-row .mast-credit .profile-sticker{
  flex-basis:82px;width:82px;height:82px;
}
.profile-contact-row .mast-name{
  font-size:clamp(32px,3.4vw,52px);
  line-height:.98;
  letter-spacing:-.015em;
}
.profile-contact-row .mast-role{font-size:12px;letter-spacing:.12em;}
.profile-contact-links{border-left:var(--bp-rule);}
.profile-contact-link{padding:20px 22px;gap:24px;}
.profile-contact-name{font-size:clamp(24px,2.5vw,36px);}
.profile-contact-name span{font-size:23px;}

/* Main content gets wider, like the reference's full-width editorial sections. */
.page{padding:0 44px 76px;}
.socials{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:0 -44px;
  border-top:0;
  border-bottom:var(--bp-rule);
}
.social{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  min-height:76px;
  padding:18px 22px;
  border:0;
  border-right:var(--bp-rule);
  font-size:clamp(10px,1vw,13px);
  letter-spacing:.08em;
  background:var(--cream);
  transition:background .2s ease,color .2s ease;
}
.social:nth-child(1){background:var(--pink);}
.social:nth-child(2){background:var(--blue);}
.social:nth-child(3){background:var(--red);border-right:0;}
.social:hover{background:var(--black);color:var(--cream);}
.play-hint{
  margin:0 -44px;
  padding:13px 16px;
  background:var(--black);
  color:var(--cream);
  opacity:1;
  border-bottom:var(--bp-rule);
  font-size:10px;
  letter-spacing:.14em;
}
.play-hint span{padding:0;border:0;border-radius:0;}

/* Oversized section heading inspired by Sugupta's graphic typography. */
.cards-intro{
  margin:0 -44px;
  padding:clamp(26px,4vw,52px) 44px 28px;
  background:var(--pink);
  color:var(--black);
  border-bottom:var(--bp-rule);
}
.cards-intro-kicker{
  margin:0 0 14px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.cards-intro h2{
  max-width:1000px;
  font-family:"Anton",sans-serif;
  font-size:clamp(48px,9.2vw,112px);
  line-height:.86;
  letter-spacing:-.025em;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}
.cards-intro-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid rgba(0,0,0,.5);
}
.cards-intro-bottom p{
  max-width:440px;
  font-size:clamp(12px,1.4vw,16px);
  line-height:1.5;
  font-weight:600;
}
.cards-intro-bottom span{
  flex:0 0 auto;
  font-family:"Anton",sans-serif;
  font-size:clamp(17px,2vw,24px);
  text-transform:uppercase;
}

/* Preserve the floating, draggable collage; simply give it a more generous stage. */
.cards{
  width:100%;
  max-width:1080px;
  height:1180px;
  margin:0 auto;
  overflow:visible;
}
.card{
  width:230px;
  height:355px;
  border-radius:4px;
}
.card-inner,.card-front,.card-back,.card-front>img,.front-overlay{border-radius:4px;}
.card-front,.card-back{border:2px solid var(--black);}
.card-front>img{border-radius:2px;}
.card-inner{box-shadow:8px 8px 0 var(--black);}
.card:nth-child(1){--x:-360px;--y:12px;--r:-8deg;}
.card:nth-child(2){--x:0px;--y:0px;--r:5deg;}
.card:nth-child(3){--x:360px;--y:18px;--r:-7deg;}
.card:nth-child(4){--x:-350px;--y:405px;--r:7deg;}
.card:nth-child(5){--x:0px;--y:390px;--r:-5deg;}
.card:nth-child(6){--x:350px;--y:405px;--r:8deg;}
.card:nth-child(7){--x:-360px;--y:800px;--r:-7deg;}
.card:nth-child(8){--x:0px;--y:785px;--r:6deg;}
.card:nth-child(9){--x:360px;--y:800px;--r:-8deg;}
.card.dragging .card-inner{box-shadow:12px 14px 0 rgba(0,0,0,.24);}

/* Four large social tiles act like the reference's strong lower-page blocks. */
.footer-socials{
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:var(--bp-rule);
  border-bottom:var(--bp-rule);
}
.footer-social{
  min-height:160px;
  padding:20px 22px;
  border-right:var(--bp-rule);
}
.footer-social-name{font-size:clamp(22px,3vw,42px);}
.footer-social-kicker{font-size:11px;letter-spacing:.12em;}
.footer-social-arrow{right:18px;bottom:18px;font-size:30px;}
.footer{overflow:hidden;}
.footer-text{padding:clamp(48px,7vw,90px) 32px 34px;}
.footer-big{
  max-width:1000px;
  font-size:clamp(42px,8vw,100px);
  line-height:.9;
  letter-spacing:-.02em;
}
.footer-heart{margin:26px 0 20px;font-size:24px;}
.footer-small{font-size:10px;letter-spacing:.14em;}
.footer-coin-field{z-index:3;}
.footer-coin-field img{opacity:1;}

/* Keep dialogs readable and unchanged in behavior on the wider layout. */
.popup-inner{max-width:min(92vw,720px);}

@media (min-width:901px){
  .cards{height:1180px;}
}

@media (min-width:601px) and (max-width:900px){
  .mast-logo{height:clamp(260px,38vw,340px);}
  .page{padding:0 24px 58px;}
  .socials,.play-hint,.cards-intro{margin-left:-24px;margin-right:-24px;}
  .cards-intro{padding-left:24px;padding-right:24px;}
  .cards{height:1110px;max-width:760px;}
  .card{width:200px;height:310px;}
  .card:nth-child(1){--x:-250px;--y:10px;--r:-8deg;}
  .card:nth-child(2){--x:0px;--y:0px;--r:5deg;}
  .card:nth-child(3){--x:250px;--y:10px;--r:-7deg;}
  .card:nth-child(4){--x:-250px;--y:370px;--r:7deg;}
  .card:nth-child(5){--x:0px;--y:355px;--r:-5deg;}
  .card:nth-child(6){--x:250px;--y:370px;--r:8deg;}
  .card:nth-child(7){--x:-250px;--y:730px;--r:-7deg;}
  .card:nth-child(8){--x:0px;--y:715px;--r:6deg;}
  .card:nth-child(9){--x:250px;--y:730px;--r:-8deg;}
  .profile-contact-row{grid-template-columns:minmax(0,1.1fr) minmax(260px,1fr);}
  .profile-contact-row .mast-credit{padding:16px;}
  .profile-contact-row .mast-name{font-size:clamp(26px,3.2vw,38px);}
  .profile-contact-name{font-size:clamp(20px,2.6vw,28px);}
}

@media (max-width:600px){
  /* Keep the current mobile-first layout and all touch interactions. */
  body{background:var(--cream)!important;background-image:none!important;}
  body::before,body::after{display:none!important;}
  .mast-logo{height:245px;}
  .mast-logo .original-mast-logo{width:min(72%,460px);height:82%;}
  .profile-tagline-marquee{font-size:13px;padding:11px 0;}
  .profile-contact-row{grid-template-columns:minmax(0,1fr);}
  .profile-contact-row .mast-credit{padding:12px;gap:12px;}
  .profile-contact-row .mast-credit .profile-sticker{flex-basis:64px;width:64px;height:64px;}
  .profile-contact-row .mast-name{font-size:clamp(23px,7vw,32px);}
  .profile-contact-links{border-left:0;border-top:var(--bp-rule);min-height:84px;}
  .profile-contact-link{padding:12px;gap:12px;}
  .profile-contact-name{font-size:clamp(18px,5vw,24px);}
  .page{padding:0 16px 44px;}
  .socials{grid-template-columns:minmax(0,1fr);margin:0 -16px;}
  .social{min-height:56px;padding:14px 16px;border-right:0;border-bottom:1px solid rgba(0,0,0,.45);font-size:11px;}
  .social:last-child{border-bottom:0;}
  .play-hint{margin:0 -16px;padding:11px 8px;font-size:8px;}
  .cards-intro{margin:0 -16px;padding:26px 16px 20px;}
  .cards-intro-kicker{font-size:9px;margin-bottom:10px;}
  .cards-intro h2{font-size:clamp(42px,12vw,64px);line-height:.88;}
  .cards-intro-bottom{margin-top:16px;padding-top:12px;gap:12px;align-items:flex-start;}
  .cards-intro-bottom p{font-size:11px;}
  .cards-intro-bottom span{font-size:15px;}
  .cards{max-width:100%;height:1510px;}
  .card{width:180px;height:280px;}
  .card-inner{box-shadow:5px 5px 0 var(--black);}
  .card:nth-child(1){--x:-86px;--y:0px;--r:-7deg;}
  .card:nth-child(2){--x:86px;--y:8px;--r:6deg;}
  .card:nth-child(3){--x:-86px;--y:300px;--r:-5deg;}
  .card:nth-child(4){--x:86px;--y:310px;--r:7deg;}
  .card:nth-child(5){--x:-86px;--y:600px;--r:-6deg;}
  .card:nth-child(6){--x:86px;--y:610px;--r:5deg;}
  .card:nth-child(7){--x:-86px;--y:900px;--r:-5deg;}
  .card:nth-child(8){--x:86px;--y:910px;--r:7deg;}
  .card:nth-child(9){--x:0px;--y:1210px;--r:-4deg;}
  .footer-socials{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-social{min-height:108px;padding:12px;border-bottom:var(--bp-rule);}
  .footer-social:nth-child(2){border-right:0;}
  .footer-social:nth-child(3),.footer-social:nth-child(4){border-bottom:0;}
  .footer-social-name{font-size:clamp(19px,6vw,28px);}
  .footer-social-kicker{font-size:8px;}
  .footer-social-arrow{right:9px;bottom:9px;font-size:21px;}
  .footer-text{padding:46px 16px 26px;}
  .footer-big{font-size:clamp(40px,12vw,60px);line-height:.92;}
  .footer-small{font-size:8px;}
}

@media (prefers-reduced-motion:reduce){
  .profile-tagline-track{animation:none;}
}


/* EDITORIAL POLISH: monochrome marquee and typographic utility links */
.profile-tagline-marquee{
  background:#000 !important;
  color:#fff !important;
  border-top:2px solid #000 !important;
  border-bottom:2px solid #000 !important;
}
.profile-tagline-track{color:#fff !important;}
.socials .social{
  font-family:"Anton", Impact, sans-serif;
  font-size:clamp(15px,1.45vw,20px) !important;
  font-weight:400;
  line-height:1.05;
  letter-spacing:.035em !important;
  text-transform:uppercase;
  text-decoration:none;
  padding:20px 18px;
  min-height:84px;
  border-right:2px solid #000 !important;
  position:relative;
}
.socials .social::after{
  content:"↗";
  font-family:Arial,sans-serif;
  font-size:1.25em;
  margin-left:12px;
  flex:0 0 auto;
  transition:transform .2s ease;
}
.socials .social:hover::after{transform:translate(3px,-3px);}
.socials .social:last-child{border-right:0 !important;}
@media(max-width:599px){
  .socials .social{font-size:16px !important;min-height:58px;padding:15px 16px;}
}

/* Final editorial refinements: CV cream, continuous frame, stronger masthead typography. */
@media (min-width:901px){
  /* The frame pseudo-element draws the black side rules. Cards sit above it. */
  body::after{z-index:2;pointer-events:none;}
  .header,.page,.footer{z-index:auto;}
  .cards{position:relative;z-index:3;}
  .cards .card{position:absolute;z-index:4;}
  .cards .card.dragging{z-index:999999 !important;}
}
.social:nth-child(3){background:var(--cream);color:var(--black);border-right:0;}
.social:nth-child(3):hover{background:var(--black);color:var(--cream);}
.mast-credit-text{display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0;}
.profile-contact-row .mast-role{
  display:inline-flex;align-self:flex-start;
  margin:0;padding:5px 7px;
  background:var(--black);color:var(--cream);
  font-family:"Inter",sans-serif;font-size:9px;font-weight:800;
  line-height:1.2;letter-spacing:.15em;text-transform:uppercase;
}
.profile-contact-row .mast-name{
  font-family:"Anton",sans-serif;
  font-size:clamp(27px,3vw,42px);
  line-height:.95;letter-spacing:-.025em;text-transform:uppercase;
}
.profile-contact-row .mast-name::after{
  content:"FOUNDER / CREATIVE DIRECTION";display:block;margin-top:7px;
  font-family:"Inter",sans-serif;font-size:8px;font-weight:800;
  line-height:1.3;letter-spacing:.16em;text-transform:uppercase;
}
@media(max-width:599px){
  .profile-contact-row .mast-role{font-size:8px;letter-spacing:.12em;}
  .profile-contact-row .mast-name{font-size:clamp(25px,7vw,34px);}
}


/* Mobile arrow glyphs: force text-style arrows, never emoji presentation. */
.link-cell-arrow,
.footer-social-arrow,
#directoryModal a span {
  font-family: Arial, Helvetica, sans-serif !important;
  font-variant-emoji: text;
  font-style: normal;
}

/* Popup titles use Anton again; Arial only fills in symbols Anton doesn't have. */
.popup-title{
  font-family:"Anton", Arial, Helvetica, sans-serif !important;
  font-variant-emoji:text;
  font-style:normal;
}

/* Mobile performance safeguard: keep the liquid and wordmark animations paused. */
@media (max-width: 600px) {
  .mast-logo .original-mast-logo,
  .mast-logo .original-mast-logo:hover {
    animation: none !important;
    transition: none !important;
    transform: translate(-50%, -50%) !important;
  }
  .mast-logo .lava-svg {
    animation: none !important;
  }
}


/* HEADER FLOATING PHOTOCARDS — clones of the original cards, same frame and effects. */
.header{position:relative;z-index:10;overflow:visible;}
.header-floating-cards{position:absolute;top:140px;left:0;right:0;height:0;z-index:9999;overflow:visible;pointer-events:none;}
.header-floating-cards .card{pointer-events:auto;position:absolute;left:50%;top:0;width:180px;height:280px;z-index:10000;will-change:transform;}
.header-floating-cards .card:nth-child(1){--x:470px;--y:105px;--r:7deg;}
.header-floating-cards .card.dragging{z-index:1000000!important;}
@media (min-width:601px) and (max-width:1100px){
 .header-floating-cards .card{width:145px;height:225px;}
 .header-floating-cards .card:nth-child(1){--x:310px;--y:80px;--r:7deg;}
}
@media (max-width:600px){.header-floating-cards{display:none!important;}}


/* FINAL TARGETED FIX: preserve frame, use CSS arrows, keep header cards on mobile. */

/* Keep the black side frame visible around the full desktop page.
   Cards can sit above the border while dragging, but the border itself stays. */
@media (min-width:901px){
  body::after{
    z-index:50 !important;
    pointer-events:none !important;
  }
  .header-floating-cards{z-index:60 !important;}
  .header-floating-cards .card{z-index:61 !important;}
  .header-floating-cards .card.dragging{z-index:100000 !important;}
}

/* Replace arrow glyphs everywhere with a consistent CSS-drawn ↗.
   This prevents emoji presentation on mobile and keeps the original link layout. */
.link-cell-arrow,
.footer-social-arrow{
  position:relative !important;
  display:inline-block !important;
  flex:0 0 26px !important;
  width:26px !important;
  height:26px !important;
  font-size:0 !important;
  line-height:0 !important;
  color:currentColor !important;
  overflow:visible !important;
  vertical-align:middle !important;
  transition:transform .2s ease !important;
}
.link-cell-arrow::before,
.footer-social-arrow::before{
  content:"" !important;
  position:absolute !important;
  display:block !important;
  left:3px !important;
  top:15px !important;
  width:22px !important;
  height:2px !important;
  background:currentColor !important;
  border:0 !important;
  transform:rotate(-45deg) !important;
  transform-origin:left center !important;
}
.link-cell-arrow::after,
.footer-social-arrow::after{
  content:"" !important;
  position:absolute !important;
  display:block !important;
  right:1px !important;
  top:3px !important;
  width:9px !important;
  height:9px !important;
  background:transparent !important;
  border-top:2px solid currentColor !important;
  border-right:2px solid currentColor !important;
  border-bottom:0 !important;
  border-left:0 !important;
}
.profile-contact-name .link-cell-arrow{flex-basis:24px !important;width:24px !important;height:24px !important;}
.link-cell:hover .link-cell-arrow,
.profile-contact-link:hover .link-cell-arrow,
.footer-social:hover .footer-social-arrow{transform:translate(3px,-3px) !important;}

/* Keep the two cloned cards visible at load on phones; scale and place them
   over the logo like the desktop composition rather than hiding them. */
.header{position:relative !important;overflow:visible !important;}
.header-floating-cards{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:0 !important;
  overflow:visible !important;
  pointer-events:none !important;
  z-index:60 !important;
}
.header-floating-cards .card{
  pointer-events:auto !important;
  position:absolute !important;
  left:50% !important;
  top:0 !important;
  width:180px !important;
  height:280px !important;
  z-index:61 !important;
  will-change:transform;
}
.header-floating-cards .card:nth-child(1){--x:470px;--y:105px;--r:7deg;}
.header-floating-cards .card.dragging{z-index:100000 !important;}
@media (min-width:601px) and (max-width:1100px){
 .header-floating-cards .card{width:145px !important;height:225px !important;}
 .header-floating-cards .card:nth-child(1){--x:310px;--y:80px;--r:7deg;}
}
@media (max-width:600px){
 .header-floating-cards{display:block !important;top:0 !important;}
 .header-floating-cards .card{width:clamp(82px,25vw,120px) !important;height:auto !important;aspect-ratio:180/280 !important;}
 .header-floating-cards .card:nth-child(1){--x:calc(50vw - 65px);--y:42px;--r:7deg;}
}


/* FINAL LAYERING CORRECTION: preserve the black frame, place cards above it. */
@media (min-width: 901px) {
  body { position: relative !important; }
  body::after {
    z-index: 0 !important;
    pointer-events: none !important;
  }
  .header {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
  }
  .header-floating-cards {
    position: absolute !important;
    top: 0 !important;
    z-index: 9999 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }
  .header-floating-cards .card {
    z-index: 10000 !important;
    pointer-events: auto !important;
  }
  .header-floating-cards .card.dragging { z-index: 999999 !important; }
  .cards { position: relative !important; z-index: 1 !important; }
  .cards .card { z-index: 2 !important; }
  .cards .card.dragging { z-index: 999999 !important; }
}

/* Match the requested loaded composition: left card high, right card lower. */
.header-floating-cards .card:nth-child(1) { --x: 570px; --y: 260px; --r: 7deg; }
@media (min-width: 601px) and (max-width: 1100px) {
  .header-floating-cards .card:nth-child(1) { --x: 310px; --y: 190px; --r: 7deg; }
}

/* Clear, consistent diagonal arrows: CSS-only, not platform emoji glyphs. */
.link-cell-arrow, .footer-social-arrow {
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
  color: currentColor !important;
  border: 0 !important;
  background: transparent !important;
  vertical-align: middle !important;
  transition: transform .2s ease !important;
}
.link-cell-arrow::before, .footer-social-arrow::before {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  left: 2px !important;
  bottom: 4px !important;
  width: 25px !important;
  height: 2px !important;
  background: #000 !important;
  border: 0 !important;
  transform: rotate(-45deg) !important;
  transform-origin: left center !important;
}
.link-cell-arrow::after, .footer-social-arrow::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  right: 1px !important;
  top: 1px !important;
  width: 10px !important;
  height: 10px !important;
  background: transparent !important;
  border: 0 !important;
  /* Two diagonal strokes make a real arrowhead, not an L-shaped corner. */
  background-image:
    linear-gradient(45deg, transparent 43%, #000 44% 58%, transparent 59%),
    linear-gradient(-45deg, transparent 43%, #000 44% 58%, transparent 59%) !important;
}
.link-cell:hover .link-cell-arrow, .profile-contact-link:hover .link-cell-arrow,
.footer-social:hover .footer-social-arrow, .social:hover::after {
  transform: translate(3px,-3px) !important;
}
/* Hide any old text arrow inside the pseudo-element container. */
.link-cell-arrow, .footer-social-arrow { color: transparent !important; }
.link-cell-arrow::before, .link-cell-arrow::after,
.footer-social-arrow::before, .footer-social-arrow::after { color: currentColor !important; }
.profile-contact-name .link-cell-arrow { flex-basis: 28px !important; width: 28px !important; height: 28px !important; }
.socials .social::after { content: none !important; }


/* === Stable final fix: keep frame, let header cards cross over it === */
@media (min-width:901px){
  body{position:relative !important;}
  body::after{
    z-index:2 !important;
    pointer-events:none !important;
  }
  .header{
    position:relative !important;
    z-index:3 !important;
    overflow:visible !important;
  }
  .header-floating-cards{
    display:block !important;
    position:absolute !important;
    z-index:20 !important;
    overflow:visible !important;
    pointer-events:none !important;
  }
  .header-floating-cards .header-floating-card{
    position:absolute !important;
    z-index:21 !important;
    pointer-events:auto !important;
    touch-action:none !important;
    cursor:grab !important;
  }
  .header-floating-cards .header-floating-card.dragging{
    z-index:999999 !important;
    cursor:grabbing !important;
  }
}
/* Keep the chosen left-high/right-low positions at load. */
.header-floating-cards .header-floating-card:nth-child(1){
  --x:570px; --y:260px; --r:7deg;
}
@media (min-width:601px) and (max-width:1100px){
  .header-floating-cards .header-floating-card:nth-child(1){--x:310px;--y:190px;--r:7deg;}
}
@media (max-width:600px){
  .header-floating-cards{display:block !important;z-index:20 !important;}
  .header-floating-cards .header-floating-card{
    width:clamp(82px,25vw,120px) !important;
    height:auto !important;
    aspect-ratio:180/280 !important;
    touch-action:none !important;
    pointer-events:auto !important;
  }
  .header-floating-cards .header-floating-card:nth-child(1){--x:calc(50vw - 65px);--y:42px;--r:7deg;}
}

/* Use a single SVG arrow icon so every link has a complete, consistent arrow. */
.link-cell-arrow,
.footer-social-arrow{
  display:inline-block !important;
  position:relative !important;
  flex:0 0 28px !important;
  width:28px !important;
  min-width:28px !important;
  height:28px !important;
  font-size:0 !important;
  line-height:0 !important;
  color:transparent !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  background-image:none !important;
}
.link-cell-arrow::before,
.footer-social-arrow::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  background-color:transparent !important;
  color:#000 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M3 24L23 4M10 4H23V17' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  border:0 !important;
  transform:none !important;
}
.link-cell-arrow::after,
.footer-social-arrow::after{content:none !important;display:none !important;}
.profile-contact-name .link-cell-arrow{flex-basis:28px !important;width:28px !important;height:28px !important;}
/* Guestbook/Ramyeon/CV row uses the same arrow artwork, aligned at the right edge. */
.socials .social{
  position:relative !important;
  padding-right:52px !important;
}
.socials .social::after{
  content:"" !important;
  position:absolute !important;
  display:block !important;
  width:28px !important;
  height:28px !important;
  right:14px !important;
  top:50% !important;
  margin:0 !important;
  transform:translateY(-50%) !important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M3 24L23 4M10 4H23V17' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
.socials .social:hover::after{transform:translate(3px,calc(-50% - 3px)) !important;}
.footer-social-arrow::before{background-color:transparent !important;}


/* ==========================================================
   HEADER FRAME + MOBILE CARD SIZE (targeted fixes)
========================================================== */

/* Top rule + side rules for the header, matching the page frame below it.
   Drawn inside the header, beneath the floating cards so cards still cross it. */
.header::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:50%;
  transform:translateX(-50%);
  width:100%;
  box-sizing:border-box;
  border-top:var(--bp-rule);
  pointer-events:none;
  z-index:3;
}
@media (min-width:481px){
  .header::before{
    width:min(var(--bp-page-width),calc(100vw - 32px));
    border-left:var(--bp-rule);
    border-right:var(--bp-rule);
  }
}

/* Phones: give the header cards an explicit size instead of relying on aspect-ratio. */
@media (max-width:600px){
  .header-floating-cards .header-floating-card{
    --hw:clamp(82px,25vw,120px);
    width:var(--hw) !important;
    height:calc(var(--hw) * 1.5556) !important;
    aspect-ratio:auto !important;
  }
}


/* ==========================================================
   FOOTER LINKS: label top, name bottom-left, arrow bottom-right
========================================================== */
.footer-social{
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
}
.footer-social-name{
  margin-top:auto;
  padding-right:44px;
}
.footer-social .footer-social-arrow{
  position:absolute !important;
  right:18px !important;
  bottom:18px !important;
  left:auto !important;
  top:auto !important;
}
@media (max-width:599px){
  .footer-social-name{padding-right:30px;}
  .footer-social .footer-social-arrow{right:10px !important;bottom:12px !important;width:22px !important;min-width:22px !important;height:22px !important;flex:none !important;}
}

/* ==========================================================
   MUSIC PLAYER (sits in the profile row next to FIORI LEE)
========================================================== */
.profile-contact-row .mast-credit{flex-wrap:wrap;}

.music-player{
  --mp-ink:#000;
  margin-left:auto;
  flex:0 1 190px;
  min-width:150px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px 12px 12px;
  background:var(--cream);
  color:var(--mp-ink);
  border:2px solid var(--mp-ink);
  box-shadow:4px 4px 0 var(--mp-ink);
  touch-action:manipulation;
  position:relative;
  z-index:5;
  text-align:left;
}
.music-meta{display:flex;flex-direction:column;gap:3px;min-width:0;}
.music-label{
  display:flex;align-items:center;gap:7px;
  font-family:"Inter",sans-serif;font-size:8px;font-weight:800;
  letter-spacing:.16em;line-height:1;text-transform:uppercase;
}
.music-title{
  font-family:"Anton",sans-serif;font-size:15px;line-height:1.1;
  letter-spacing:.01em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* tiny equaliser that only moves while music plays */
.music-eq{display:inline-flex;align-items:flex-end;gap:2px;height:9px;}
.music-eq b{display:block;width:2px;height:3px;background:var(--red);}
.music-player.is-playing .music-eq b{animation:musicEq .9s ease-in-out infinite;}
.music-player.is-playing .music-eq b:nth-child(2){animation-delay:.2s;}
.music-player.is-playing .music-eq b:nth-child(3){animation-delay:.4s;}
@keyframes musicEq{0%,100%{height:3px}50%{height:9px}}

.music-controls{display:flex;align-items:center;gap:8px;}
.music-btn{
  flex:0 0 auto;
  width:34px;height:34px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--cream);color:var(--mp-ink);
  border:2px solid var(--mp-ink);border-radius:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, background .12s ease;
}
.music-btn:hover{background:var(--pink);}
.music-btn:active{transform:translate(1px,1px);}
.music-btn:focus-visible,.music-volume:focus-visible{outline:3px solid var(--red);outline-offset:2px;}
.music-btn svg{width:18px;height:18px;fill:currentColor;display:block;}
.music-toggle{background:var(--red);}
.music-toggle:hover{background:var(--red);filter:brightness(.92);}
.music-toggle .ico-pause,.music-player.is-playing .music-toggle .ico-play{display:none;}
.music-player.is-playing .music-toggle .ico-pause{display:block;}
.music-mute .ico-muted,.music-player.is-muted .music-mute .ico-vol{display:none;}
.music-player.is-muted .music-mute .ico-muted{display:block;}

.music-volume{
  -webkit-appearance:none;appearance:none;
  flex:1 1 auto;min-width:0;width:100%;height:24px;margin:0;
  background:transparent;cursor:pointer;
}
.music-volume::-webkit-slider-runnable-track{height:4px;background:var(--mp-ink);border:0;}
.music-volume::-moz-range-track{height:4px;background:var(--mp-ink);border:0;}
.music-volume::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:20px;margin-top:-8px;
  background:var(--red);border:2px solid var(--mp-ink);border-radius:0;
}
.music-volume::-moz-range-thumb{
  width:10px;height:16px;
  background:var(--red);border:2px solid var(--mp-ink);border-radius:0;
}

/* Not enough room beside the name: drop the player onto its own full-width row. */
@media (max-width:1100px){
  .music-player{flex:1 1 100%;margin-left:0;margin-top:4px;max-width:none;}
}
@media (max-width:599px){
  .music-player{box-shadow:3px 3px 0 var(--mp-ink);}
}