/* On the Fridge */
:root {
  --paper: #fbf8f1;
  --ink: #1f1a15;
  --muted: #6d6257;
  --marker: 'Permanent Marker', 'Comic Sans MS', cursive;
  --hand: 'Caveat', 'Bradley Hand', cursive;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: #1d1712 url(art/kitchen-blur.jpg) center / cover fixed no-repeat;
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
body.locked { overflow: hidden; }
button { font: inherit; color: inherit; }

/* ---------- the kitchen ---------- */
#kitchen { position: relative; width: 100%; overflow: hidden; }
#scene { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.slice { position: absolute; background-image: url(art/fridge.webp); background-repeat: no-repeat; pointer-events: none; }
#photo { position: absolute; inset: 0; pointer-events: none; }

.door { position: absolute; }
.door-skin { position: absolute; inset: 0; pointer-events: none; }
.door-things { position: absolute; inset: 0; }
#doorR { transform-origin: 100% 50%; will-change: transform; backface-visibility: hidden; }
#doorR.moving .door-things { pointer-events: none; }
.door-edge {
  position: absolute; top: 0; bottom: 0; left: 0; width: 26px;
  transform-origin: 0 50%; transform: rotateY(-90deg);
  background: linear-gradient(90deg, #2b2b2c 0 18%, #d9dcdf 18% 30%, #f4f5f6 30% 100%);
  pointer-events: none; opacity: 0;
}
#doorR.open-ish .door-edge { opacity: 1; }

/* inside the fridge */
#inside { position: absolute; overflow: hidden; background: #dfe4e8; }
#inside .inside-img { position: absolute; left: 0; top: 0; width: 100%; background: url(art/inside.webp) center top / 100% auto no-repeat; filter: brightness(.18) saturate(.6); transition: filter .12s linear; }
#inside .inside-img::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 30%; background: linear-gradient(rgba(223,228,232,0), #dfe4e8); }
#inside.lit .inside-img { filter: none; }
.inside-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .15s linear;
  background: radial-gradient(120% 40% at 50% 0%, rgba(235,246,255,.55), rgba(235,246,255,0) 70%); mix-blend-mode: screen; }
#inside.lit .inside-glow { opacity: 1; }
#inside::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 3px #3a3b3c, inset 14px 0 18px -10px rgba(0,0,0,.35), inset -14px 0 18px -10px rgba(0,0,0,.35); }

.loaf {
  position: absolute; padding: 0; border: 0; cursor: pointer;
  background: url(art/loaf.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 5px rgba(40,50,60,.35)) brightness(.2);
  transition: transform .55s cubic-bezier(.3,.7,.2,1), filter .12s linear;
}
#inside.lit .loaf { filter: drop-shadow(0 6px 5px rgba(40,50,60,.35)); }
.loaf.aside { transform: translateX(118%) rotate(4deg); }
.loaf:focus-visible { outline: 3px solid #2f7de1; outline-offset: 4px; }

.note {
  position: absolute; background: #fbe26a; color: #2b2410;
  font-family: var(--hand); line-height: 1.12;
  box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 8px 12px -6px rgba(0,0,0,.35);
  transform-origin: 50% 0; transition: transform .5s cubic-bezier(.3,.7,.2,1), box-shadow .5s;
  background-image: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0) 14%, rgba(255,255,255,.18) 70%, rgba(0,0,0,.04));
  filter: brightness(.2); cursor: pointer; overflow: hidden;
}
#inside.lit .note { filter: none; }
.note-in { padding: 9% 9% 8%; }
.note h1 { margin: 0 0 .1em; font: 700 1.55em/1 var(--hand); }
.note p { margin: .28em 0 0; }
.note-title { font-weight: 700; }
.note-bio { font-size: .92em; }
.note-links { font-size: .92em; }
.note a { color: #1f3f9a; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.note.read { z-index: 5; box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 26px 40px -10px rgba(0,0,0,.5); cursor: default; }

#leak { position: absolute; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(220,236,255,0), #f4f9ff 35% 65%, rgba(220,236,255,0));
  box-shadow: 0 0 18px 6px rgba(205,228,255,.55), 0 0 60px 14px rgba(205,228,255,.18); border-radius: 4px; mix-blend-mode: screen; }
/* the light from the open fridge */
#spill { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s linear; mix-blend-mode: screen; }
#spill.on { opacity: 1; }

/* the handle: the photo's own handle, made pullable */
#handle { position: absolute; padding: 0; border: 0; background: transparent; cursor: grab; border-radius: 12px; z-index: 30; touch-action: none; }
#handle:focus-visible { outline: 3px solid rgba(255,255,255,.9); outline-offset: 2px; }

/* ---------- prints ---------- */
.print {
  position: absolute; left: 0; top: 0; padding: 0; margin: 0; border: 0; background: none;
  cursor: pointer; transform-origin: 0 0; touch-action: manipulation;
}
.print:focus-visible { outline: none; }
.print:focus-visible .paper { outline: 3px solid #2f7de1; outline-offset: 3px; }
.print .curl { position: absolute; bottom: 7%; width: 42%; height: 26%; box-shadow: 0 9px 9px rgba(0,0,0,.38); pointer-events: none; }
.print .curl.l { left: 5%; transform: rotate(-3.5deg); }
.print .curl.r { right: 5%; transform: rotate(3.5deg); }
.print .paper {
  position: absolute; inset: 0; display: block; background: #fff;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 1px 1.5px rgba(0,0,0,.32), 0 4px 9px -2px rgba(0,0,0,.22);
  transition: box-shadow .2s, transform .2s;
}
.print .paper img { position: absolute; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.print .light { position: absolute; inset: 0; pointer-events: none; }
/* a print from the photo lab: borderless and glossy */
.print { --gx: 44%; }
.print.gloss .light { background:
  linear-gradient(112deg, rgba(255,255,255,0) calc(var(--gx) - 16%), rgba(255,255,255,.17) var(--gx), rgba(255,255,255,.04) calc(var(--gx) + 8%), rgba(255,255,255,0) calc(var(--gx) + 18%)),
  linear-gradient(180deg, rgba(255,246,232,.06), rgba(40,26,12,.12)); }
/* a bordered print */
.print.border .paper { background: #fbfaf7; }
.print.border .light { background:
  linear-gradient(112deg, rgba(255,255,255,0) calc(var(--gx) - 14%), rgba(255,255,255,.12) var(--gx), rgba(255,255,255,0) calc(var(--gx) + 14%)),
  linear-gradient(180deg, rgba(255,246,232,.04), rgba(40,26,12,.12)); }
/* printed at home on plain paper */
.print.paper-sheet .paper { background: #f6f3ec; }
.print.paper-sheet img { filter: saturate(.92) contrast(.97); }
.print.paper-sheet .light { background:
  radial-gradient(60% 50% at 100% 100%, rgba(0,0,0,.10), rgba(0,0,0,0) 70%),
  linear-gradient(180deg, rgba(255,246,232,.05), rgba(40,26,12,.14)); }
/* the lifted corner */
.print .paper::after { content: ''; position: absolute; right: 0; bottom: 0; width: 18%; height: 26%; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0) 52%, rgba(255,255,255,.28) 78%, rgba(0,0,0,.10) 100%); }
.print.curl-l .paper::after { right: auto; left: 0; background: linear-gradient(225deg, rgba(255,255,255,0) 52%, rgba(255,255,255,.28) 78%, rgba(0,0,0,.10) 100%); }
@media (hover: hover) {
  /* lift the one you're looking at so all of it shows */
  .door-things .print:hover { z-index: 240 !important; }
  .print:hover .paper { box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 3px 4px rgba(0,0,0,.3), 0 16px 26px -6px rgba(0,0,0,.42); transform: scale(1.03); }
}
.print.held { visibility: hidden; }
.print.down { cursor: pointer; }

/* the kitchen's light over everything on a door: brighter where the steel catches the ceiling light, dimmer lower down */
.door-light { position: absolute; inset: 0; z-index: 250; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(70% 9% at 55% 7%, rgba(255,248,236,.55), rgba(255,248,236,0) 100%),
              linear-gradient(180deg, rgba(255,244,228,.35) 0%, rgba(255,244,228,0) 22%, rgba(30,30,32,0) 30%, rgba(30,30,32,.24) 60%, rgba(30,30,32,.3) 100%); }
body[data-mode="phone"] .door-light { background: linear-gradient(180deg, rgba(255,244,228,.3) 0%, rgba(255,244,228,0) 12%, rgba(30,30,32,0) 30%, rgba(30,30,32,.22) 100%); }
/* stainless, all the way down: the photo's warm floor bounce turned the lower steel brown, so take the colour out of it there */
.door-skin::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: saturation;
  background: linear-gradient(180deg, rgba(128,128,128,0) 18%, rgba(128,128,128,.55) 45%, rgba(128,128,128,.78) 75%, rgba(128,128,128,.82) 100%); }
#handle::after { content: ''; position: absolute; left: 8px; right: 8px; top: 0; bottom: 0; border-radius: 10px; opacity: 0; transition: opacity .25s;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35) 45%, rgba(255,255,255,0)); mix-blend-mode: screen; }
@media (hover: hover) { #handle:hover::after { opacity: 1; } }
/* the handle catches the light as the door gives (the hint): its highlight slides across the bar as the door turns */
#handle::before { content: ''; position: absolute; left: 9px; right: 9px; top: 2px; bottom: 2px; border-radius: 12px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.8) 50%, rgba(255,255,255,0) 64%) no-repeat;
  background-size: 240% 100%; background-position: 100% 0; mix-blend-mode: screen; }
#handle.glint::before { animation: glint 1.4s cubic-bezier(.45,0,.3,1) 1; }
@keyframes glint { 0% { opacity: 0; background-position: 100% 0; } 25% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; background-position: 0% 0; } }

/* ---------- magnets ---------- */
.magnet { position: absolute; left: 0; top: 0; touch-action: none; cursor: grab; z-index: 200; user-select: none; -webkit-user-select: none; }
.magnet img, .magnet svg { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none;
  filter: drop-shadow(.5px 1.5px 1px rgba(0,0,0,.5)) drop-shadow(2px 5px 5px rgba(0,0,0,.28)); transition: filter .15s, transform .15s; }
.magnet.drag { cursor: grabbing; }
.magnet.off img, .magnet.off svg { transform: scale(1.14); filter: drop-shadow(3px 9px 6px rgba(0,0,0,.35)) drop-shadow(8px 22px 16px rgba(0,0,0,.25)); }

/* ---------- the floor ---------- */
#floor { position: absolute; inset: 0; pointer-events: none; }
#floor .print { pointer-events: auto; }

/* ---------- a picture taken down to look at ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.sheet-dim { position: absolute; inset: 0; background: rgba(18,13,9,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet {
  position: relative; display: flex; flex-direction: column; width: min(940px, calc(100vw - 48px)); max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px);
  background: var(--paper); border-radius: 2px;
  box-shadow: 0 2px 3px rgba(0,0,0,.25), 0 30px 60px -12px rgba(0,0,0,.6);
  transform-origin: 50% 0;
}
.sheet:focus { outline: none; }
.sheet-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px 10px 20px; border-bottom: 1px solid rgba(60,45,30,.12); flex: none; }
.sheet-mag { position: relative; flex: none; width: 54px; height: 54px; display: grid; place-items: center; margin: -6px 0 -6px -4px; }
.sheet-mag img, .sheet-mag svg { max-width: 100%; max-height: 100%; filter: drop-shadow(.5px 1.5px 1px rgba(0,0,0,.45)) drop-shadow(2px 5px 5px rgba(0,0,0,.22)); }
.sheet-names { flex: 1; min-width: 0; }
.sheet-names h2 { margin: 0; font: 400 clamp(22px, 3.2vw, 30px)/1.1 var(--marker); color: #1b1814; letter-spacing: .01em; }
.sheet-client { margin: 3px 0 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sheet-close { flex: none; width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(40,30,20,.08); color: #2b241d; font: 28px/44px system-ui, sans-serif; cursor: pointer; }
.sheet-close:hover { background: rgba(40,30,20,.14); }
.sheet-close:focus-visible { outline: 3px solid #2f7de1; outline-offset: 2px; }
.sheet-body { overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 18px 22px 30px; flex: 1; min-height: 0; }
.sheet-print { display: block; max-width: 100%; height: auto; max-height: min(62vh, 560px); margin: 0 auto 22px; object-fit: contain;
  box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 18px -8px rgba(0,0,0,.35); }
.sheet-work { --ab-fg: var(--ink); --ab-muted: var(--muted); --ab-accent: #2f7de1; --ab-chrome: 150px; }
.sheet-work .ab-lede { font-size: 18px; line-height: 1.5; max-width: 62ch; }
.sheet-work .ab-heading { font: 400 21px/1.2 var(--marker); color: #26211b; margin-top: 8px; }
.sheet-work .ab-text { max-width: 66ch; color: #3b342c; }
.sheet-work .ab-credits { padding-top: 10px; border-top: 1px dashed rgba(60,45,30,.25); }
.sheet-work figcaption { font-family: var(--hand); font-size: 20px; color: #4a4036; }
.sheet-work .ab-frame { box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sheet-work .ab-image img { box-shadow: 0 1px 2px rgba(0,0,0,.2); }

@media (max-width: 640px) {
  .sheet-wrap { align-items: stretch; }
  .sheet { width: 100vw; max-height: none; height: 100vh; height: 100dvh; border-radius: 0; }
  .sheet-head { padding: max(10px, env(safe-area-inset-top)) 10px 8px 12px; gap: 10px; }
  .sheet-mag { width: 44px; height: 44px; }
  .sheet-body { padding: 14px 14px 40px; }
  .sheet-work { --ab-chrome: 140px; }
  .sheet-print { max-height: 46vh; }
}

/* ---------- loading: the seal's light ---------- */
#loader { position: fixed; inset: 0; z-index: 300; background: #120e0b; display: grid; place-items: center; transition: opacity .45s ease; }
#loader.gone { opacity: 0; pointer-events: none; }
#loader .seal { width: min(46vw, 420px); height: 2px; background: rgba(255,255,255,.04); border-radius: 2px; overflow: hidden; }
#loader .seal i { display: block; height: 100%; width: 0; background: #eaf4ff; box-shadow: 0 0 12px 3px rgba(200,228,255,.6); transition: width .2s linear; }

@media (prefers-reduced-motion: reduce) {
  .loaf, .note, #inside .inside-img { transition: none; }
}