@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/InstrumentSerif-Regular.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "CiTY Song";
  src: url("/home/media/CiTY-Song.woff2") format("woff2");
  font-display: swap;
}
:root {
  color-scheme: dark;
  --background: #0b0d0e;
  --text: #e7e8e3;
  --secondary: #97a1a3;
  --ease: cubic-bezier(.2, .65, .25, 1);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", sans-serif;
  color: var(--text);
  background: var(--background);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
a:focus-visible, button:focus-visible { outline: 1px solid currentColor; outline-offset: 7px; }
.masthead, footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-inline: clamp(24px, 4.4vw, 80px);
}
.masthead { padding-top: 27px; gap: 24px; }
.wordmark {
  font-family: "Instrument Serif", "Times New Roman", serif;
  font-size: 66px;
  line-height: 1;
  letter-spacing: -.045em;
}
.get-city { display: block; padding: 2px 0; border: 0; background: transparent; cursor: pointer; }
.get-city img { display: block; width: auto; height: 40px; }
a:not(.get-city) { transition: opacity 180ms ease-out; }
@media (hover: hover) { a:not(.get-city):hover { opacity: .56; } }
main {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 27px;
  padding: 38px 0 18px;
}
h1 {
  font-family: "CiTY Song", "Songti SC", SimSun, serif;
  font-size: clamp(28px, 3.1vw, 43px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .02em;
  margin: 0;
}
.collection {
  position: relative;
  width: min(650px, 94vw);
  aspect-ratio: 650 / 480;
  isolation: isolate;
  perspective: 1200px;
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.collection.is-ready { opacity: 1; }
.folder-back {
  position: absolute;
  width: 63.7%;
  height: auto;
  left: 18.15%;
  top: 31.8%;
  pointer-events: none;
}
.folder-front, .folder-blur {
  position: absolute;
  z-index: 3;
  width: 82%;
  height: auto;
  top: 57.2%;
  left: 9%;
  transform-origin: 50% 87%;
  transition: transform 440ms var(--ease);
  pointer-events: none;
}
.folder-blur {
  aspect-ratio: 1766 / 777;
  backdrop-filter: blur(16px) saturate(.55);
  mask: url("/home/media/folder-front.webp") center / 100% 100% no-repeat;
}
.photograph {
  position: absolute;
  z-index: 2;
  padding: 10px;
  border: 1px solid rgba(20, 22, 21, .08);
  background: #f3f3ee;
  border-radius: 10px;
  width: 34%;
  aspect-ratio: 2 / 3;
  box-shadow: 0 2px 3px #1416150c, 0 10px 18px #14161513;
  transform-origin: 50% 90%;
  transition: transform 440ms var(--ease), box-shadow 200ms ease-out;
}
.photograph img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.photograph-doorbell { left: 21%; top: 17%; transform: rotate(-12deg); }
.photograph-doorbell img { object-position: 50% 28%; }
.photograph-postbox { left: 46%; top: 23%; transform: rotate(13deg); }
.photograph-postbox img { object-position: 50% 35%; }
.photograph-amber { z-index: 2; left: 36%; top: 3%; transform: rotate(8deg); }
.photograph-doorbell, .photograph-postbox { z-index: 1; }
.folder-toggle {
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 0;
  border-radius: 12px;
  background: transparent;
}
.collection[data-open="true"] .photograph-doorbell { transform: translate(-42%, -18%) rotate(-12deg); }
.collection[data-open="true"] .photograph-postbox { transform: translate(42%, -15%) rotate(12deg); }
.collection[data-open="true"] .photograph-amber { transform: translate(-8%, -7%) rotate(0); }
.collection[data-open="true"] :is(.folder-front, .folder-blur) { transform: translateY(4%) rotateX(18deg); }
.collection[data-open="true"] .folder-toggle { inset: 59% 9% 1%; }
.photograph:focus-visible { z-index: 5; outline-offset: 5px; }
@media (hover: hover) {
  .collection[data-open="false"]:hover :is(.folder-front, .folder-blur) { transform: translateY(1.5%); }
  .collection[data-open="false"]:hover .photograph-doorbell { transform: translateY(-8px) rotate(-12deg); }
  .collection[data-open="false"]:hover .photograph-postbox { transform: translateY(-8px) rotate(13deg); }
  .collection[data-open="false"]:hover .photograph-amber { transform: translateY(-8px) rotate(8deg); }
  .collection[data-open="true"] .photograph:hover { box-shadow: 0 3px 5px #14161512, 0 14px 24px #14161522; }
}
.collection[data-open="false"]:has(.folder-toggle:focus-visible) .photograph-doorbell { transform: translateY(-8px) rotate(-12deg); }
.collection[data-open="false"]:has(.folder-toggle:focus-visible) .photograph-postbox { transform: translateY(-8px) rotate(13deg); }
.collection[data-open="false"]:has(.folder-toggle:focus-visible) .photograph-amber { transform: translateY(-8px) rotate(8deg); }
footer { padding-block: 29px 28px; gap: 24px; font-size: 11px; color: var(--secondary); }
footer a { display: inline-block; padding-block: 12px; }
.legal { display: flex; gap: 30px; }
.object-view {
  width: min(920px, calc(100% - 48px));
  max-height: calc(100svh - 48px);
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  overflow: auto;
}
.object-view::backdrop { background: #0b0d0ef5; backdrop-filter: blur(20px); }
.object-content { padding: 0 0 12px; }
.close-view { display: block; margin: 0 0 12px auto; min-height: 44px; padding: 10px 0 10px 20px; background: none; border: 0; font-size: 13px; }
.close-view:focus-visible { outline-offset: -2px; }
figure { margin: 0; display: grid; justify-items: center; gap: 19px; }
.object-image { display: block; max-width: 100%; width: auto; height: min(66svh, 720px); object-fit: contain; }
figcaption { font: 27px/1.5 "CiTY Song", "Songti SC", serif; }
body:has(dialog[open]) { overflow: hidden; }
@media (min-width: 601px) and (max-height: 820px) {
  .collection { width: min(650px, 72svh, 94vw); }
  main { gap: 20px; padding-block: 20px 10px; }
  footer { padding-block: 15px; }
}
@media (max-width: 600px) {
  .masthead { padding-top: 26px; }
  .wordmark { font-size: 57px; }
  main { gap: 46px; padding-block: 20px 95px; }
  h1 { font-size: clamp(25px, 7.7vw, 32px); letter-spacing: 0; }
  .photograph { border-radius: 7px; padding: 6px; }
  .photograph img { border-radius: 2px; }
  .collection[data-open="true"] .photograph-doorbell { transform: translate(-24%, -15%) rotate(-8deg); }
  .collection[data-open="true"] .photograph-postbox { transform: translate(24%, -12%) rotate(8deg); }
  footer { padding-block: 18px; }
  .legal { gap: 24px; }
  .object-view { width: calc(100% - 40px); max-height: calc(100svh - 32px); }
  .object-image { height: auto; width: auto; max-height: 70svh; }
  figcaption { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}