:root{
  --page-w: 2048;
  --page-h: 1151;
  --cream:#eae4df;
  --plum:#8c4763;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--cream);font-family:Georgia,serif;color:#201915}
a{color:inherit}
.site-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:0;background:var(--cream)}
.canvas{position:relative;width:min(100vw, 1366px);background:var(--cream);overflow:hidden;box-shadow:0 0 18px rgba(70,50,35,.08)}
.page-home{aspect-ratio:2048/1361}
.page-about,.page-margins,.page-soundtracks,.page-real,.page-good,.page-contact,.page-real_deal_soundtrack,.page-good_bones_soundtrack{aspect-ratio:2048/1151}
.page-projects{aspect-ratio:2048/1211}
.canvas>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;user-select:none;-webkit-user-drag:none}
.hotspot{position:absolute;display:block;z-index:20;text-indent:-9999px;overflow:hidden;white-space:nowrap;border-radius:8px;outline-offset:2px}
.hotspot:focus-visible{outline:2px solid var(--plum);background:rgba(140,71,99,.08);text-indent:0;font-size:12px;padding:2px;color:var(--plum)}
/* Invisible nav overlays: match the menu baked into the Canva images. */
/* Recalibrated from the actual 2048px-wide Canva exports. */
.nav-home{left:55.7%;top:0; width:5.7%;height:7.5%}
.nav-about{left:63.3%;top:0; width:5.8%;height:7.5%}
.nav-projects{left:71.2%;top:0; width:6.8%;height:7.5%}
.nav-margins{left:80.2%;top:0; width:7.0%;height:7.5%}
.nav-contact{left:89.2%;top:0; width:7.0%;height:7.5%}
/* Page-specific clickable areas */
.link-goodreads-home{left:74%;top:88%;width:18%;height:5%}
.link-stay-home{left:52%;top:48%;width:13%;height:5%}
.link-project-real{left:36%;top:15%;width:25%;height:75%}
.link-project-goodbones{left:77%;top:19%;width:16%;height:13%}
.link-project-keeper{left:77%;top:34%;width:16%;height:13%}
.link-project-forks{left:77%;top:49%;width:16%;height:13%}
.link-project-stay{left:77%;top:65%;width:18%;height:15%}
.link-margins-playlists{left:34%;top:22%;width:31%;height:37%}
.link-soundtracks-back{left:8%;top:7%;width:18%;height:20%}
.link-soundtracks-real{left:27%;top:61%;width:10%;height:20%}
.link-soundtracks-good{left:57%;top:61%;width:10%;height:20%}
.link-contact-email{left:30%;top:45%;width:15%;height:6%}
.link-contact-tiktok{left:15%;top:66%;width:14%;height:26%}
.link-contact-goodreads{left:75%;top:50%;width:18%;height:6%}
/* Spotify overlays. Add real embed URLs in config.js and these replace the mock player. */
.spotify-embed{position:absolute;border:0;border-radius:14px;background:#121212;box-shadow:0 10px 24px rgba(0,0,0,.24);display:none}
.has-spotify .spotify-embed{display:block}
.spotify-real{left:34.2%;top:13.5%;width:32.1%;height:53.5%}
.spotify-good{left:33.1%;top:13.1%;width:34.8%;height:66.8%}
@media (max-width: 700px){
  .site-shell{align-items:flex-start;overflow-x:auto;justify-content:flex-start}
  .canvas{width:1366px;max-width:none;transform-origin:top left;box-shadow:none}
  body::before{content:'Tip: turn your phone sideways for the full desk-spread view.';display:block;padding:.5rem 1rem;font:14px/1.3 system-ui,sans-serif;color:#5c4a3f;background:#f8f2eb}
}
.seo-text {
    position:absolute;
    left:-9999px;
}
.site-footer {
    text-align: center;
    font-size: 12px;
    color: #8a817b;
    margin: 30px 0 15px;
    font-family: Georgia, serif;
    letter-spacing: 0.5px;
}

/* Story reading pages */
body.story-body{background:#eae4df;color:#211915;font-family:Georgia,'Times New Roman',serif;}
.story-site{min-height:100vh;background:#eae4df;padding:34px 20px 80px;}
.story-nav{max-width:980px;margin:0 auto 34px;text-align:right;font-family:Georgia,'Times New Roman',serif;font-size:22px;letter-spacing:.06em;}
.story-nav a{margin-left:34px;text-decoration:none;color:#201915;border-bottom:2px solid transparent;}
.story-nav a:hover,.story-nav a:focus-visible{border-bottom-color:#8c4763;color:#8c4763;}
.story-wrap{max-width:820px;margin:0 auto;background:#f7f1ea;border:1px solid rgba(80,55,40,.18);box-shadow:0 14px 36px rgba(70,50,35,.10);padding:58px 72px 72px;}
.story-kicker{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:#8c4763;margin:0 0 12px;text-align:center;}
.story-title{font-size:50px;line-height:1.05;margin:0 0 10px;text-align:center;font-weight:normal;color:#201915;}
.story-meta{text-align:center;margin:0 0 36px;color:#5d514a;font-size:16px;font-style:italic;}
.story-warning{max-width:620px;margin:0 auto 30px;padding:12px 16px;border-top:1px solid rgba(140,71,99,.35);border-bottom:1px solid rgba(140,71,99,.35);color:#5d3145;text-align:center;font-size:15px;}
.story-content p{font-size:15px;line-height:1.72;margin:0 0 1.35em;}
.story-footer{margin-top:48px;text-align:center;font-size:18px;}
.story-footer a{color:#8c4763;text-decoration:none;border-bottom:1px solid #8c4763;}
@media (max-width:700px){
  .story-site{padding:24px 14px 60px;}
  .story-nav{text-align:center;font-size:18px;margin-bottom:22px;}
  .story-nav a{margin:0 10px;}
  .story-wrap{padding:36px 24px 44px;}
  .story-title{font-size:38px;}
  .story-content p{font-size:18px;line-height:1.68;}
}