/*
Theme Name: Miyabi Portfolio
Author: miyabi
Description: Waterlight portfolio with Profile, project modals and original animations.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: miyabi-portfolio
*/
*{box-sizing:border-box}html,body{margin:0;min-height:100%;color:#171313;font-family:"Noto Serif JP",serif;font-weight:400}body{background:#f7fafc}.canvas{position:relative;width:100%;aspect-ratio:1920/1080;background:url("assets/background.png") center/100% 100% no-repeat;overflow:hidden}.profile{position:absolute;left:88.020833%;top:4.537037%;font-size:32px;line-height:1.55;border-bottom:1px solid #171313;padding:0 6px 1px;letter-spacing:.02em}.work{margin:0}.work>img{position:absolute;left:calc(var(--x)/1920*100%);top:calc(var(--y)/1080*100%);width:calc(var(--w)/1920*100%);height:auto;display:block}.work figcaption{position:absolute;left:calc(var(--tx)/1920*100%);top:calc(var(--ty)/1080*100%);font-size:20px;line-height:1.3;white-space:nowrap;letter-spacing:.045em}.work figcaption span{border-bottom:1px solid #171313;padding-bottom:1px}.droplets{position:absolute;inset:0;pointer-events:none}.droplet{position:absolute;height:auto;display:block}@media(min-width:769px) and (max-width:1700px){.work figcaption{font-size:clamp(12px,1.041667vw,20px)}.profile{font-size:clamp(20px,1.666667vw,32px)}}@media(max-width:768px){body{background:#f7fafc url("assets/background.png") center/cover fixed}.canvas{aspect-ratio:auto;min-height:100vh;padding:110px 24px 64px;background:none;display:flex;flex-direction:column;gap:48px;overflow:hidden}.profile{top:24px;right:24px;left:auto;font-size:32px}.work{position:relative;width:100%;z-index:1}.work>img{position:static;width:min(100%,calc(var(--w)*1px));height:auto}.work figcaption{position:static;font-size:20px;margin-top:12px;white-space:normal;line-height:1.5}.energy,.horror,.garden{align-self:flex-end;width:max-content;max-width:100%}.droplets{opacity:.75}.droplet{min-width:30px}.panda{order:2}.aroma{order:3}.cats{order:4}.horror{order:5}.parfait{order:6}.garden{order:7}}@media (min-width:769px){
  html,body{width:100%;height:100%;overflow:hidden}
  body{background:#f7fafc url("assets/background.png") center/cover no-repeat}
  .canvas{position:absolute;left:50%;top:50%;width:1920px;height:1080px;min-height:0;transform:translate(-50%,-50%) scale(var(--scene-scale,1));transform-origin:center}
  .work figcaption{font-size:20px}
  .profile{font-size:32px}
}
/* Small desktop composition adjustments; retain each image's natural ratio. */
@media (min-width:769px){
  .smart-glasses>img,.panda>img{width:calc(var(--w)*.95/1920*100%)}
  .profile{left:89.270833%;top:3.055556%}
}
/* Portfolio title sizing and profile alignment. */
.work figcaption span{font-size:22px}
@media (min-width:769px){.profile{left:90.104167%}}

/* Align desktop captions with their artwork edges. */
@media (min-width:769px){
  .smart-glasses figcaption{left:calc(560/1920*100%);top:calc(331/1080*100%)}
  .panda figcaption{top:calc(411/1080*100%)}
  .energy figcaption{top:auto;bottom:calc(720/1080*100%)}
  .horror figcaption{top:auto;bottom:calc(73/1080*100%)}
  .garden figcaption{top:auto;bottom:calc(312/1080*100%)}
  .cats figcaption{left:calc(8/1920*100%);top:auto;bottom:calc(240/1080*100%);width:135px;white-space:normal;text-align:right;line-height:1.4}
  .cats figcaption span{box-decoration-break:clone;-webkit-box-decoration-break:clone}
  .profile{left:90.9375%}
}
.caption-break{display:none}
@media(min-width:769px){.caption-break{display:block}}
/* One viewport-wide background avoids seams at the scaled canvas edges. */
html{margin:0;padding:0;min-height:100%;background:#f7fafc}
body{margin:0;padding:0;min-height:100vh;background:#f7fafc url("assets/background.png") center center / cover no-repeat fixed}
.canvas{background:none}
/* Group positioning refinements at the 1920px reference size. */
@media(min-width:769px){
  .smart-glasses>img,.smart-glasses figcaption{translate:-48px 0}
  .droplet:nth-child(1),.droplet:nth-child(5){translate:-48px 0}
  .garden>img,.garden figcaption{translate:-24px 16px}
  .cats>img{left:calc(292/1920*100%)}
  .cats figcaption{left:calc(8/1920*100%);width:auto;white-space:nowrap;text-align:left;line-height:1.3}
  .cats .caption-break{display:none}
  .profile{left:91.770833%}
}

@media(min-width:769px){
  .garden>img,.garden figcaption{translate:-8px 16px}
  .profile{left:auto;right:8px}
}
@media(min-width:769px){
  .cats>img{left:calc(286/1920*100%)}
  .cats figcaption{left:calc(2/1920*100%)}
}
@media(min-width:769px){
  .garden>img,.garden figcaption{translate:8px 16px}
  .cats>img{left:calc(284/1920*100%)}
  .cats figcaption{left:0}
}
@media(min-width:769px){
  .canvas{overflow:visible}
  .cats>img,.cats figcaption{translate:calc(-1 * min(48px,var(--side-room,0px))) 0}
}
@media(min-width:769px){
  .panda figcaption{left:calc(1728/1920*100%);top:calc(380.95/1080*100%)}
  .panda figcaption span{display:block;width:max-content;line-height:28px;padding-bottom:1px;border-bottom:1px solid #171313}
  .panda figcaption>br{display:none}
}
@media(min-width:769px){
  .panda figcaption{top:auto;bottom:calc(669.05/1080*100%)}
  .droplet:nth-child(11){translate:0 -48px}
}
@media(min-width:769px){
  .energy>img,.energy figcaption{translate:-24px 0}
}
.droplets{z-index:2}

/* Shared page navigation: underline appears on hover or keyboard focus. */
a.profile{color:#171313;text-decoration:none;border-bottom-color:transparent}
a.profile:hover,a.profile:focus-visible{border-bottom-color:#171313}
a.profile:focus-visible{outline:2px solid #171313;outline-offset:5px}

/* Compact navigation and spacing on phones only. */
@media(max-width:768px){
 .canvas{padding-top:98px}
 a.profile{font-size:22px;width:max-content;min-width:0;padding-left:0;padding-right:0}
}