* {box-sizing:border-box}
html {scroll-behavior:smooth}
body{margin:0;background:#f8f0e5;color:#291b12;font-family:Georgia,'Times New Roman',serif}
.site{max-width:1800px;margin:0 auto}
.visual-page{position:relative;width:100%;line-height:0}
.page-visual{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none}
.hotspot{position:absolute;left:var(--left);top:var(--top);width:var(--width);height:var(--height);display:block;cursor:pointer;border-radius:8px;z-index:3}
.hotspot:focus-visible,.mobile-menu-button:focus-visible{outline:3px solid #976d35;outline-offset:2px;background:rgba(255,245,210,.12)}
.hotspot:hover{background:rgba(255,240,194,.09)}
.anchor-point{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.desktop-showcase{top:56%}.desktop-about{top:62%}.desktop-social{top:86%}
.mobile-menu-wrap,.mobile-social{display:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%)}
@media (max-width:720px){
  .site{max-width:720px}
  .desktop-links,.desktop-social{display:none}
  .mobile-menu-wrap,.mobile-social{display:block}
  .mobile-menu-button{position:absolute;z-index:11;top:0.5%;right:2%;width:11%;height:6%;border:0;background:transparent;cursor:pointer}
  .mobile-menu{position:absolute;z-index:10;top:6.1%;right:3%;display:flex;flex-direction:column;gap:0;padding:9px 0;border:1px solid rgba(194,149,85,.6);border-radius:12px;background:rgba(34,24,22,.96);box-shadow:0 8px 24px rgba(0,0,0,.28);font:15px/1.3 Arial,sans-serif;line-height:normal;min-width:160px}
  .mobile-menu[hidden]{display:none}
  .mobile-menu a{color:#fff7e6;padding:12px 18px;text-decoration:none}
  .mobile-menu a:hover,.mobile-menu a:focus-visible{background:rgba(255,255,255,.14)}
  .desktop-showcase{top:54.2%}.desktop-about{top:61.5%}.desktop-social{top:86%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}