@font-face{font-family:RoomSerif;src:url('assets/room-serif-ui.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
/* Keep the navigation aligned to the artwork, even when cover crops its sides. */
.hub-backdrop{background-position:center top}
.hub-heading{left:4%;right:4%;top:7.8%;isolation:isolate}
.hub-heading::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;top:50%;width:min(890px,76vw);height:245px;transform:translate(-50%,-46%);background:radial-gradient(ellipse,#fff6d6c9 0%,#ffe6aaa3 30%,#ffe6aa40 56%,#ffe6aa00 74%);filter:blur(18px)}
.hub-heading h2{font-family:RoomSerif,"Noto Serif SC",serif;font-weight:700;font-size:clamp(34px,3.6vw,62px);line-height:1.45;letter-spacing:.025em;color:#49240f;text-shadow:0 1px 0 #fff6dbb0}
.hub-heading p{font-family:RoomSerif,"Noto Serif SC",serif;font-weight:700;font-size:clamp(18px,1.65vw,28px);letter-spacing:.13em;margin-top:2px;color:#55301a}
.hub-entry{box-sizing:border-box;left:var(--art-left);top:var(--art-top);right:auto;width:var(--art-width);height:var(--art-height);min-height:0;padding:clamp(12px,1vw,20px) clamp(18px,1.65vw,28px);border-radius:clamp(24px,2vw,36px);background:#fff3dff7;border:1.5px solid #925a32;box-shadow:inset 0 1px 0 #fffaf0,0 2px 4px #75401f0c}
.hub-entry strong{font-family:RoomSerif,"Noto Serif SC",serif;font-weight:700;font-size:clamp(23px,1.85vw,36px);line-height:1.35;letter-spacing:.055em;gap:10px}
.hub-entry strong span{font-family:serif;font-size:32px;font-weight:400;letter-spacing:0}
.hub-entry small{font-size:clamp(14px,1.13vw,21px);line-height:1.5;letter-spacing:.015em;margin-top:3px}
.hub-snapshot{width:clamp(160px,11.6vw,220px);padding:12px 15px 13px;border-radius:21px;border:1.5px solid #ad7547;background:#fff6e5}
.hub-fixed-picture{margin-top:0!important;display:block;width:100%;aspect-ratio:160/92;border-radius:8px;background:url('assets/hub-reference.png') 3.902116% 87.632509%/1045% 1022.826087% no-repeat}
#hubSnapshot{display:none}
.hub-snapshot span:last-child{font-size:clamp(14px,1.15vw,20px);letter-spacing:.01em;margin-top:8px}
@media(min-width:1101px) and (max-height:650px){.hub-heading{top:5%}.hub-heading h2{font-size:38px}.hub-heading p{font-size:19px}.hub-entry strong{font-size:24px}.hub-entry small{font-size:14px}.hub-entry{padding:10px 18px}.hub-snapshot{width:150px}}
@media(min-width:701px) and (max-width:1100px){.hub-heading{top:8%;left:3%;right:3%}.hub-heading h2{font-size:clamp(30px,4.2vw,44px)}.hub-heading p{font-size:21px}.hub-entries{position:absolute;top:29%;left:6%;right:6%;display:grid;grid-template-columns:1fr 1fr;gap:18px}.hub-entry{position:relative;inset:auto;width:auto;height:auto;min-height:104px;padding:16px 22px}.hub-entry strong{font-size:26px}.hub-entry small{font-size:16px;white-space:normal}.hub-snapshot{width:180px;bottom:4%}}
@media(max-width:700px){.hub-heading{top:12%;left:12px;right:12px}.hub-heading h2{font-size:clamp(24px,6.5vw,32px);letter-spacing:0;line-height:1.5}.hub-heading p{font-size:15px;letter-spacing:.04em;margin-top:10px}.hub-heading::before{width:100vw;height:190px;filter:blur(14px)}.hub-entry{inset:auto;width:auto;height:auto;min-height:114px;padding:14px;border-radius:21px}.hub-entry strong{font-size:21px;letter-spacing:.025em}.hub-cards strong{font-size:18px}.hub-entry small{font-size:12px;white-space:normal;line-height:1.7}.hub-snapshot{width:150px;padding:9px 10px;border-radius:15px}.hub-snapshot span:last-child{font-size:12px;margin-top:7px}.hub-backdrop{background-position:48% top}}
@media(max-width:700px) and (max-height:650px){.hub-heading{top:12%}.hub-entries{top:32%;gap:8px}.hub-entry{min-height:96px;padding:10px}.hub-snapshot{width:120px;bottom:12px}.hub-snapshot span:last-child{font-size:10px}}
