/* Shared portal styling comes directly from yellogic.xyz. */
body { display: flex; }
body * { letter-spacing: 0; }
.identity h1 span, .home-mark, .home-mark span, .destination-note, .site-footer { letter-spacing: 0; }
.portal.screen { width: min(1080px, 92%); }
.header-actions { display: flex; align-items: center; gap: 24px; }
.home-mark > span:first-child { font: 32px/1 "Patrick Hand", sans-serif; color: var(--yellow); }
.contact-links { display: flex; align-items: center; gap: 9px; }
.contact-links .hotspot, .site-footer .hotspot { position: static; width: auto; height: auto; }
.contact-links a { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.contact-links .mail img { width: 23px; height: auto; }
.contact-links .telegram img { width: 31px; height: auto; }
.nav-item { top: auto; left: auto; height: auto; border: 0; background: none; color: inherit; width: 100%; min-width: 0; }
.nav-item .destination-title, .nav-item .destination-note { display: block; }
.main-nav { gap: 0; }
.main-nav .nav-item { padding: 16px 8px; }
.main-nav .icon-stage { width: 170px; height: 170px; max-width: 100%; }
.main-nav .icon-stage .lab-icon { width: 150px; }
.main-nav .icon-stage .hat-icon { width: 164px; }
.main-nav .icon-stage .art-icon { width: 140px; }
.main-nav .destination-title { margin-top: 16px; line-height: 1.2; }
.main-nav .destination-note { min-height: 33px; margin-top: 10px; line-height: 1.5; }
.main-nav .destination:hover .icon-stage, .main-nav .destination:focus-visible .icon-stage { transform: translateY(-4px); }
.identity h1 span { margin-left: 0; }
.identity h1 .logo-mark { position: relative; display: block; margin: 0; font-size: 0; line-height: 0; }
.identity .logo-mark .logo-art { max-width: 502px; max-height: none; }
.mushroom-neon, .mushroom-source { position: absolute; inset: 0; pointer-events: none; }
.mushroom-source {
  background: url("yellogo.png") center / 100% 100% no-repeat;
  clip-path: polygon(72.5% 19%, 76.8% 5.7%, 78.7% 6%, 80.4% 12%, 81.6% 29%, 80.7% 33%, 80.4% 65%, 82.3% 73%, 82.3% 85%, 72.5% 85%, 72.4% 73%, 74.5% 68%, 74.8% 34%, 73.7% 31%, 72.4% 28%);
}
.mushroom-neon {
  opacity: .75;
  animation: mushroom-neon 8s ease-in-out infinite;
}
.terrier-figure { position: relative; display: block; aspect-ratio: 1; }
.main-nav .terrier-figure img { display: block; width: 100%; height: auto; }
.terrier-figure::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, #fffba1 7%, #fff500 38%, #f2d600 61%, #bf9100 92%);
  -webkit-mask: url("nav-studio-icon.png") center / contain no-repeat;
  mask: url("nav-studio-icon.png") center / contain no-repeat;
  pointer-events: none;
}
.terrier-details { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@keyframes mushroom-neon {
  0%, 100% { opacity: .65; filter: hue-rotate(0deg) saturate(1.5) brightness(1.2) drop-shadow(0 0 4px #ff43a6) drop-shadow(0 0 10px #ff43a655); }
  30% { opacity: .9; filter: hue-rotate(95deg) saturate(1.8) brightness(1.4) drop-shadow(0 0 5px #73ffdb) drop-shadow(0 0 14px #73ffdb66); }
  60% { opacity: .75; filter: hue-rotate(210deg) saturate(1.7) brightness(1.3) drop-shadow(0 0 4px #bb7dff) drop-shadow(0 0 12px #bb7dff66); }
  80% { opacity: .85; filter: hue-rotate(305deg) saturate(1.8) brightness(1.4) drop-shadow(0 0 5px #ffc64d) drop-shadow(0 0 14px #ffc64d66); }
}
.site-footer nav { display: flex; align-items: center; gap: 22px; }
.menu-dialog { background: #080808; border-color: rgba(255,245,0,.42); font-family: Arial, Helvetica, sans-serif; }
.menu-dialog::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(9px); }
.dialog-head { border-color: var(--line); }
.dialog-head h2 { font-family: "Patrick Hand", sans-serif; }
.dialog-body { scrollbar-color: #777220 #080808; }
.dialog-body h3 { font: 24px/1.25 "Patrick Hand", sans-serif; color: var(--yellow); }
.dialog-body a { font-size: inherit; overflow-wrap: anywhere; }
#projects-content a { padding: 11px 0; min-height: 44px; border-bottom: 1px solid var(--line); font-size: 17px; width: 100%; }
#projects-content h3 { margin-bottom: 12px; }
.studio-copy, .design-copy { font-size: 15px; line-height: 1.75; }
.studio-copy h3, .design-copy h3 { margin-bottom: 12px; }
.design-copy a, .studio-copy a, .design-studio-link button { color: #fff500; }
.design-point, .design-points { border-color: var(--line); }
.design-point { grid-template-columns: minmax(0, 224px) minmax(0, 1fr); gap: 24px; padding: 24px 0; }
.design-point img { width: 100%; aspect-ratio: 11 / 8; object-fit: contain; border-radius: 4px; background: #10110f; }
.design-point .design-example { display: block; width: 100%; text-decoration: none; }
.design-example-caption { display: block; margin-top: 8px; color: #b9b9a3; font-size: 12px; line-height: 1.5; }
.design-example:hover .design-example-caption { color: var(--yellow); }
.design-example:focus-visible { outline: 2px solid var(--yellow); outline-offset: 5px; }
@media (max-width: 599px) {
  .design-point { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 0; }
  .design-point .design-example { max-width: 360px; }
}
@media (min-width: 1500px) and (min-height: 851px) { .portal.screen { width: 1120px; } }
@media (min-width: 701px) and (max-height: 850px) {
  .main-nav .icon-stage { width: 148px; height: 140px; }
  .main-nav .icon-stage .lab-icon { width: 135px; }
  .main-nav .icon-stage .hat-icon { width: 148px; }
  .main-nav .icon-stage .art-icon { width: 126px; }
  .main-nav .destination-title { margin-top: 12px; }
}
@media (max-width: 700px) {
  .identity .logo-mark .logo-art { max-width: 420px; }
  .portal.screen { width: 94%; }
  .header-actions { gap: 14px; }
  .rain-toggle span { display: none; }
  .site-footer { align-items: flex-start; }
  .site-footer nav { gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
  .main-nav .nav-item { padding: 12px 4px; }
  .main-nav .icon-stage { width: 118px; height: 112px; }
  .main-nav .icon-stage .lab-icon { width: 106px; }
  .main-nav .icon-stage .hat-icon { width: 117px; }
  .main-nav .icon-stage .art-icon { width: 99px; }
  .main-nav .destination-title { margin-top: 12px; }
  .main-nav .destination-note { font-size: 10px; }
}
@media (max-width: 400px) {
  .portal.screen { width: 96%; }
  .header-actions { gap: 6px; }
  .contact-links { gap: 6px; }
  .main-nav .icon-stage { width: 100%; height: 96px; }
  .main-nav .icon-stage .lab-icon { width: 95px; }
  .main-nav .icon-stage .hat-icon { width: 104px; }
  .main-nav .icon-stage .art-icon { width: 88px; }
}
@media (min-width: 701px) and (max-height: 650px) {
  .main-nav .icon-stage { width: 125px; height: 108px; }
  .main-nav .icon-stage .lab-icon { width: 110px; }
  .main-nav .icon-stage .hat-icon { width: 122px; }
  .main-nav .icon-stage .art-icon { width: 104px; }
  .main-nav .destination-title { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mushroom-neon { animation: none; opacity: .4; filter: drop-shadow(0 0 4px #bf70ff); }
  .main-nav .destination:hover .icon-stage, .main-nav .destination:focus-visible .icon-stage { transform: none; }
}