@font-face{font-family:Quinn;src:url('assets/fonts/QuinnDisplay-Black.otf') format('opentype');font-weight:900;font-display:swap}
@font-face{font-family:Quinn;src:url('assets/fonts/QuinnDisplay-BoldItalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:Nitti;src:url('assets/fonts/NittiGrotesk-Light.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:Nitti;src:url('assets/fonts/NittiGrotesk-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:NittiCond;src:url('assets/fonts/NittiGroteskCondensed-ExtraBold.otf') format('opentype');font-weight:800;font-display:swap}
@font-face{font-family:NittiCond;src:url('assets/fonts/NittiGroteskCondensed-ExtraBlack.otf') format('opentype');font-weight:900;font-display:swap}
:root{--paper:#f3eee5;--ink:#111;--red:#b52b24;--gold:#9e7c3e}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink)}
.poster{position:relative;width:min(100%,1536px);margin:0 auto;line-height:0;overflow:hidden;background:var(--paper)}
.poster-image{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.hotspot{position:absolute;display:block;background:transparent;border:0;cursor:pointer;z-index:8;color:transparent;text-decoration:none;line-height:1;padding:0}
.hotspot span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hotspot:focus-visible{outline:3px solid var(--red);outline-offset:2px;background:rgba(181,43,36,.08)}

/* More editorial hover labels. */
.tile::after{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 13px);transform:translate(-50%,7px) rotate(-.5deg);width:230px;max-width:24vw;padding:14px 16px 13px;background:#f5eee2;color:#17120d;font:900 clamp(16px,1.25vw,22px)/1.03 Quinn,Georgia,serif;opacity:0;pointer-events:none;transition:opacity .18s ease .12s,transform .18s ease .12s;box-shadow:0 12px 28px rgba(36,25,13,.25);border:1px solid rgba(91,68,42,.25);text-align:left;white-space:normal}
.tile::before{content:attr(data-kicker);position:absolute;left:50%;bottom:calc(100% + 80px);transform:translate(-50%,7px) rotate(-.5deg);width:198px;z-index:2;color:var(--red);font:800 10px/1.1 NittiCond,Arial,sans-serif;letter-spacing:.1em;opacity:0;pointer-events:none;transition:opacity .18s ease .12s,transform .18s ease .12s;text-align:left}
.tile:hover::after,.tile:focus-visible::after,.tile:hover::before,.tile:focus-visible::before{opacity:1;transform:translate(-50%,0) rotate(-.5deg)}
.liir::after,.red-dot::after,.negroni::after,.notebook::after,.workshop-note::after,.dino::after,.feather::after,.door::after{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,5px);width:max-content;max-width:260px;padding:9px 12px;background:#171612;color:#f4eee4;font:800 12px/1.2 NittiCond,Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase;opacity:0;pointer-events:none;transition:.18s ease .12s;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.hotspot:hover::after,.hotspot:focus-visible::after{opacity:1;transform:translate(-50%,0)}

.work-nav{left:29.7%;top:1.2%;width:5.5%;height:2.2%}.collected-nav{left:35.6%;top:1.2%;width:7.2%;height:2.2%}.desk-nav{left:44.1%;top:1.2%;width:6.2%;height:2.2%}.workshop-nav{left:52%;top:1.2%;width:7.6%;height:2.2%}.boredroom-nav{left:60.8%;top:1.2%;width:7.6%;height:2.2%}
.anchor{position:absolute;top:39.4%;left:0;width:1px;height:1px}.anchor-collected{top:57.4%}.anchor-desk{top:71.8%}.anchor-workshop{top:73%;left:70%}.anchor-boredroom{top:84.4%}
.work-1{left:13.2%;top:41.0%;width:10.8%;height:15.2%}.work-2{left:24.6%;top:40.7%;width:11.2%;height:15.7%}.work-3{left:36.5%;top:40.6%;width:11.4%;height:15.8%}.work-4{left:48.3%;top:40.8%;width:11.4%;height:15.7%}.work-5{left:60.4%;top:40.9%;width:10.4%;height:15.5%}.work-6{left:71.6%;top:41.0%;width:10.2%;height:15.4%}
.liir{left:85.3%;top:42.4%;width:11.8%;height:13.2%}.red-dot{left:.2%;top:18.2%;width:3.5%;height:3.5%}.negroni{left:10.5%;top:73.1%;width:13.4%;height:12.9%}.notebook{left:51.2%;top:72.7%;width:17.4%;height:14.2%}.workshop-note{left:69.1%;top:73.2%;width:16.2%;height:13.0%}.dino{left:86.1%;top:73.1%;width:11.2%;height:14.2%}.feather{left:45.8%;top:95.4%;width:16%;height:3.2%}.door{left:62.2%;top:84.5%;width:16.5%;height:11.6%}.say-hello{left:1.2%;top:95.2%;width:19%;height:3.2%}.linkedin{left:29.5%;top:95.4%;width:10%;height:2.8%}
.red-dot-cue{position:absolute;left:3.05%;top:19.3%;z-index:7;color:var(--red);font:700 clamp(15px,1.45vw,24px)/1 Quinn,Georgia,serif;transform:rotate(-18deg);opacity:.72;pointer-events:none;text-shadow:0 1px 0 rgba(255,255,255,.65)}

dialog{width:min(780px,calc(100vw - 30px));border:0;padding:0;background:#f7f0e5;color:#111;box-shadow:0 24px 80px rgba(0,0,0,.32);font-family:Nitti,Arial,sans-serif;line-height:1.45;overflow:visible}
dialog::backdrop{background:rgba(15,12,8,.62);backdrop-filter:blur(5px)}
dialog .close{position:absolute;right:14px;top:6px;border:0;background:none;font:300 38px/1 Nitti,Arial,sans-serif;cursor:pointer;z-index:3}
#dialogEyebrow{margin:0;color:var(--red);font:800 14px/1.2 NittiCond,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
#dialogTitle{font:900 clamp(34px,6vw,66px)/.98 Quinn,Georgia,serif;margin:.16em 0 .35em}
#dialogBody{font:300 18px/1.5 Nitti,Arial,sans-serif}
.dialog-inner{padding:42px}
#dialogBody p{margin:.75em 0}#dialogBody a{color:var(--red);font-weight:700}.dialog-image{display:block;width:100%;max-height:480px;object-fit:cover;margin:0 0 24px}.plaque{margin-top:22px;border:1px solid #7c6233;background:linear-gradient(#c4a15b,#92713a);color:#1b1408;padding:14px 18px;font:700 14px/1.35 Nitti,Arial,sans-serif;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}.liir-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.liir-grid article{border-top:1px solid #b9aa98;padding-top:12px}.liir-grid b{font:800 18px NittiCond,Arial,sans-serif;text-transform:uppercase}.note{background:#f6e58f;padding:20px;transform:rotate(-1deg);box-shadow:0 8px 22px rgba(0,0,0,.14);font:700 21px/1.35 Nitti,Arial,sans-serif}.small{font-size:15px;color:#5d554a}

/* Collected: replace only the original photo window and plaque, preserving the original frame. */
.collected-artifact{position:absolute;z-index:7;border:0;background:transparent;padding:0;cursor:pointer;color:#15120e;line-height:1.15;text-align:left;overflow:visible}
.collected-artifact img{position:absolute;left:7.5%;top:2%;width:85%;height:67%;object-fit:cover;filter:grayscale(.45) saturate(.6) contrast(1.03);box-shadow:none}
.collected-artifact .artifact-plaque{position:absolute;left:9%;right:9%;top:75%;height:23%;padding:4.5% 5%;background:linear-gradient(180deg,#c8a65f,#9a7537);border:1px solid #6f5429;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 2px 4px rgba(0,0,0,.18);font-family:Nitti,Arial,sans-serif;text-align:center;color:#171007}
.artifact-plaque b{display:block;font:800 clamp(7px,.68vw,11px)/1 NittiCond,Arial,sans-serif;letter-spacing:.06em}.artifact-plaque em{display:block;margin-top:3px;font:300 clamp(6px,.6vw,9.5px)/1.08 Nitti,Arial,sans-serif;font-style:normal}
.collected-artifact .artifact-story{position:absolute;left:50%;bottom:103%;width:280px;max-width:24vw;padding:16px 17px;transform:translate(-50%,8px) rotate(-.45deg);background:#f5ede0;border:1px solid rgba(93,72,45,.38);box-shadow:0 12px 30px rgba(0,0,0,.25);color:#17130e;font:300 clamp(11px,.86vw,15px)/1.43 Nitti,Arial,sans-serif;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease .16s,transform .18s ease .16s;white-space:normal}
.collected-artifact:hover .artifact-story,.collected-artifact:focus-visible .artifact-story{opacity:1;visibility:visible;transform:translate(-50%,0) rotate(-.45deg)}
.collected-artifact:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.collected-1{left:13.2%;top:58.75%;width:11.15%;height:11.05%}.collected-2{left:24.75%;top:58.75%;width:11.1%;height:11.05%}.collected-3{left:36.3%;top:58.75%;width:11.1%;height:11.05%}.collected-4{left:48.0%;top:58.75%;width:11.1%;height:11.05%}.collected-5{left:59.7%;top:58.75%;width:11.1%;height:11.05%}.collected-6{left:71.35%;top:58.75%;width:11.1%;height:11.05%}

@media(max-width:760px){.poster{min-width:760px;transform-origin:top left}body{overflow-x:auto}dialog{width:min(680px,calc(100vw - 22px))}.dialog-inner{padding:28px}.liir-grid{grid-template-columns:1fr}.collected-artifact .artifact-story{max-width:none;width:220px;font-size:12px}.tile::after{width:190px;max-width:none}.tile::before{width:158px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tile::after,.tile::before,.hotspot::after,.artifact-story{transition:none}}
/* =========================================================
   COLLECTED — FINAL POLAROID + BRASS PLAQUE SURGICAL FIX
   Keep the original North Star frames visible underneath.
   ========================================================= */

.collected-artifact {
  position: absolute;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  cursor: pointer;
  z-index: 8;
}

/* New photographs sit only inside the original Polaroid windows */
.collected-artifact > img {
  position: absolute;
  left: 8%;
  top: 3%;
  width: 84%;
  height: 62%;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: cover;
  object-position: center;
  box-shadow: none;
  filter: saturate(.9) contrast(.96);
  z-index: 1;
}

/* Preserve the original brass border and screws underneath.
   This covers only the old engraved center text. */
.collected-artifact .artifact-plaque {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 2%;
  height: 27%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(
      180deg,
      rgba(190, 151, 77, .98) 0%,
      rgba(171, 130, 62, .98) 48%,
      rgba(150, 108, 48, .98) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(65,42,13,.2);
  color: #201707;
  text-align: center;
  line-height: 1.08;
  z-index: 2;
}

/* Date */
.collected-artifact .artifact-plaque b {
  display: block;
  margin: 0 0 4px;
  font-family: NittiCond, "Arial Narrow", sans-serif;
  font-size: clamp(8px, .88vw, 13px);
  font-weight: 800;
  letter-spacing: .08em;
  font-style: normal;
}

/* Location */
.collected-artifact .artifact-plaque em {
  display: block;
  margin: 0;
  font-family: Nitti, Georgia, serif;
  font-size: clamp(7px, .72vw, 11px);
  font-weight: 700;
  font-style: normal;
  line-height: 1.12;
}

/* Story remains hidden until hover/focus */
.collected-artifact .artifact-story {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  width: 240px;
  max-width: 28vw;
  padding: 14px 16px;
  background: #f4eddf;
  color: #17130e;
  border: 1px solid rgba(68, 51, 30, .25);
  box-shadow: 0 12px 28px rgba(24, 18, 10, .24);
  font-family: Nitti, Georgia, serif;
  font-size: 13px;
  line-height: 1.38;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 7px) rotate(-.35deg);
  transition:
    opacity 170ms ease,
    transform 170ms ease,
    visibility 170ms ease;
  z-index: 20;
}

.collected-artifact:hover .artifact-story,
.collected-artifact:focus-visible .artifact-story {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) rotate(-.35deg);
}

/* Prevent any generic hotspot tooltip from appearing as well */
.collected-artifact::after {
  display: none !important;
}

/* Preserve the individual positions already assigned to cards 1–6 */
.collected-artifact.collected-1,
.collected-artifact.collected-2,
.collected-artifact.collected-3,
.collected-artifact.collected-4,
.collected-artifact.collected-5,
.collected-artifact.collected-6 {
  overflow: visible;
}

@media (max-width: 760px) {
  .collected-artifact .artifact-story {
    width: 210px;
    max-width: none;
  }
}