/* A centered title introduces the archive; navigation stays in the document flow. */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: auto;
  min-height: 96px;
  flex-wrap: wrap;
  padding-block: 12px;
  background: var(--paper);
  box-shadow: 0 1px 0 #13171c0a;
}
.header nav { min-width: 0; flex-wrap: wrap; }
.header nav a { min-height: 44px; display: inline-flex; align-items: center; }
.view { scroll-margin-top: calc(var(--archive-header-height, 96px) + 20px); }
html { scroll-padding-top: calc(var(--archive-header-height, 96px) + 20px); }
:where(a, button, input, textarea, select, [tabindex]) {
  scroll-margin-top: calc(var(--archive-header-height, 96px) + 20px);
}
.home-view .archive-room {
  height: auto;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: clip;
  padding: 12px 0 28px;
}
.home-view .home-copy {
  position: relative;
  inset: auto;
  width: calc(100% - 48px);
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  pointer-events: auto;
}
.home-copy h1 {
  font-size: clamp(3.25rem, 7.4vw, 6.625rem);
  line-height: 1.02;
  margin: 15px 0 18px;
  letter-spacing: -.055em;
}
.home-copy h1 > span { display: inline-block; }
.home-view .home-copy p {
  font-size: 1rem;
  max-width: none;
  margin: 0;
  line-height: 1.6;
}
.home-copy p br { display: none; }
.home-copy p br::after { content: " "; }
.home-copy .text-link { margin-top: 4px; min-height: 44px; gap: 28px; }
.home-view .cabinet-area {
  position: relative;
  inset: auto;
  width: min(100%, 1120px);
  height: clamp(460px, 68vh, 680px);
  margin: 0 auto;
  flex: none;
}
.home-view .cabinet-annotation {
  display: none;
  right: 2%;
  top: 34%;
}
.home-view .home-note {
  position: absolute;
  inset: auto auto 230px 5%;
  margin: 0;
  width: 235px;
  padding: 20px;
  max-width: none;
}
.home-note .note-pin { left: 80px; }
.home-view .archive-number { bottom: 55px; }
#cabinet-fallback { inset: 12% 15% 18%; }
@media (max-width: 1100px) {
  .home-view .home-note { left: 3%; width: 210px; bottom: 235px; }
  .home-view .cabinet-annotation { right: 3%; }
  .annotation-line { width: 32px; }
}
@media (max-width: 900px) {
  .home-view .cabinet-annotation { display: none; }
  .home-view .home-note {
    position: relative;
    inset: auto;
    margin: 30px auto 10px;
    width: 260px;
    max-width: 80%;
  }
}
@media (max-width: 760px) {
  .header { height: auto; min-height: 112px; padding: 12px 5% 0; gap: 8px; }
  .header nav { padding-bottom: 8px; flex-wrap: wrap; }
  .header nav a { font-size: .875rem; padding: 9px 8px; }
  .header-cta { font-size: .875rem; }
  .home-view .archive-room { padding-top: 5px; }
  .home-view .home-copy { width: 90%; max-width: none; margin: 0 auto; }
  .home-copy h1 { font-size: clamp(2.75rem, 10.8vw, 5rem); margin: 15px 0; }
  .home-copy p br { display: block; }
  .home-copy p br::after { content: none; }
  .home-view .cabinet-area {
    width: 100%;
    height: clamp(430px, 65vh, 620px);
    margin: 0 auto;
  }
  .home-view .home-note { margin-top: 28px; }
  #cabinet-fallback { inset: 10% 8% 18%; }
}
@media (max-width: 380px) {
  .header .brand-descriptor { display: none; }
  .header nav a { padding-inline: 6px; }
  .home-copy .eyebrow { letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home-note:hover { transform: rotate(-5deg); }
}

/* Personal photo on the archive wall; the 3D remains the primary interaction. */
.home-view .cabinet-area{isolation:isolate}
.archive-photo{position:absolute;z-index:0;left:23%;top:12%;width:clamp(90px,13vw,145px);margin:0;padding:7px 7px 17px;background:var(--paper);box-shadow:2px 4px 8px #13171c25;transform:rotate(-8deg);pointer-events:none}
.archive-photo::before{content:"";position:absolute;left:28%;top:-9px;width:45%;height:22px;background:#d9d7b9b3;transform:rotate(5deg)}
.archive-photo img{display:block;width:100%;height:auto}
.home-view #cabinet{z-index:1}
@media(max-width:760px){.archive-photo{left:12%;top:8%;width:clamp(80px,18vw,120px)}}

.archive-details{position:absolute;inset:0;z-index:0;pointer-events:none;color:var(--ink)}
.coffee-tag{position:absolute;left:17%;top:54%;width:95px;padding:12px;background:#ded9c2;transform:rotate(5deg);box-shadow:1px 2px 4px #13171c15;display:grid;gap:5px}
.coffee-tag span{font-size:10px;line-height:1.4;letter-spacing:.05em}.coffee-tag i{font-style:normal;font-size:7px;border-top:1px solid #13171c40;padding-top:6px}
.color-proof{position:absolute;left:27%;top:61%;width:110px;background:var(--paper);padding:8px;transform:rotate(-3deg);box-shadow:1px 2px 4px #13171c15}
.color-proof>span{font-size:7px;letter-spacing:.03em;display:block;margin-bottom:7px}.color-proof>div{display:flex;height:25px}.color-proof i{flex:1;background:var(--sky)}.color-proof i:nth-child(2){background:var(--orange)}.color-proof i:nth-child(3){background:var(--walnut)}.color-proof i:nth-child(4){background:var(--muted)}
.motion-tag{position:absolute;right:21%;top:14%;width:114px;padding:12px;background:var(--ink);color:var(--paper);transform:rotate(7deg);box-shadow:1px 3px 5px #13171c20;display:grid;gap:9px}.motion-tag span,.motion-tag small{font-size:8px;letter-spacing:.08em}.motion-tag svg{width:100%;height:auto}
@media(max-width:760px){.coffee-tag{left:8%;top:43%;width:73px;padding:8px}.color-proof{left:9%;top:70%;width:88px}.motion-tag{right:8%;top:9%;width:88px;padding:9px}.motion-tag span,.motion-tag small{font-size:7px}}
@media(max-width:400px){.coffee-tag{left:5%;width:64px}.color-proof{left:5%;width:75px}.motion-tag{right:5%;width:72px}}

.home-view .archive-room{overflow:visible}
.home-view .cabinet-area{height:clamp(560px,76vh,800px)}
@media(max-width:760px){.home-view .cabinet-area{height:clamp(520px,72vh,740px)}}

/* The first visit starts with the closed cabinet under a single overhead light. */
.archive-intro body{background:#0d1014;color:var(--paper);isolation:isolate}
.archive-intro body::before{content:"";position:fixed;inset:-100%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,var(--paper) 0%,var(--paper) 30%,#efefe600 65%);opacity:0;transform:scale(.08)}
.archive-illuminating body::before{animation:archive-light-bloom 150ms cubic-bezier(.3,0,.2,1) forwards}
@keyframes archive-light-bloom{0%{opacity:0;transform:scale(.08)}35%{opacity:.7}100%{opacity:1;transform:scale(1.8)}}
.archive-revealed .header,.archive-revealed .index-line,.archive-revealed .home-bottom{animation:archive-content-reveal 350ms ease-out both}
.archive-revealed .home-copy{animation:archive-title-rise 350ms cubic-bezier(.16,1,.3,1) both}
@keyframes archive-title-rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes archive-content-reveal{from{opacity:0}to{opacity:1}}
.archive-intro .header,.archive-intro footer,
.archive-intro .index-line,.archive-intro .home-copy,
.archive-intro .home-bottom,.archive-intro .archive-number,
.archive-intro .cabinet-annotation,.archive-intro .cabinet-hint{display:none}
.archive-intro .home-view .archive-room{background-image:none;height:100svh;min-height:360px;padding:0;display:grid;place-items:center;overflow:hidden}
.archive-intro .home-view .cabinet-area{width:100%;height:100%;max-height:none;margin:0}
.archive-intro #cabinet canvas:focus-visible{outline-color:var(--paper)}
.archive-intro .cabinet-interaction-tray :is(a,button):focus-visible{outline-color:var(--paper)}
.archive-intro .skip-link{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.archive-illuminating body::before,.archive-revealed .header,.archive-revealed .home-copy,.archive-revealed .index-line,.archive-revealed .home-bottom{animation:none}}