/* fishtown.dev /doors: two Fishtown rowhomes, two doors to pick from.

   Standalone like fitkeyos.css (it does not load styles.css). Type follows
   the brand kit: Montserrat, Instrument Serif italic for accents. Everything
   in a house is sized in em off --dw (the door width), so one number scales
   the whole front. Colours: the website door is the brand's Fishtown orange
   taken to a lacquer red, the FitKeyOS door is that page's cobalt, and the
   FitKeyOS fish and plate use its lime, which FitKeyOS only puts on dark.

   Two joined red-brick rowhomes against a night sky. Above each door hangs
   a Fishtown shad sign with the house number plate under it, and the
   transom carries the name. Fan stickers sit in the windows. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/Montserrat-normal-400_800.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/InstrumentSerif-italic-400.woff2") format("woff2"); }

:root {
  --cream: #f3ead8;
  --trim: #efe9dc;
  --trim-shade: #cfc6b4;
  --gold-1: #fff3c4;
  --gold-2: #e8b34a;
  --gold-3: #9a6a1c;
  --brass: #c99a3e;
  --warm: #ffcf8a;
  --door-work: #c23a1b;
  --door-fk: #2f45d0;
  --ink: #111317;
  --lime: #d4f36b;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --ital: "Instrument Serif", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Red Philly brick, same bond, for the rowhomes. */
  --brick-red:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' fill='%23574339'/%3E%3Cg%3E%3Crect x='1' y='1' width='57' height='18' rx='1' fill='%238a3a27'/%3E%3Crect x='61' y='1' width='57' height='18' rx='1' fill='%23964129'/%3E%3Crect x='-29' y='21' width='57' height='18' rx='1' fill='%237c3322'/%3E%3Crect x='31' y='21' width='57' height='18' rx='1' fill='%239c4a2f'/%3E%3Crect x='91' y='21' width='57' height='18' rx='1' fill='%237c3322'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120'%3E%3Cg opacity='.5'%3E%3Crect x='61' y='1' width='57' height='18' fill='%23a65538'/%3E%3Crect x='211' y='41' width='57' height='18' fill='%236f2c1d'/%3E%3Crect x='121' y='81' width='57' height='18' fill='%23b0603f'/%3E%3Crect x='301' y='61' width='57' height='18' fill='%23722e1f'/%3E%3Crect x='1' y='101' width='57' height='18' fill='%23a14d33'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #0c0c0d;
  color: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, p { margin: 0; }
em { font-family: var(--ital); font-style: italic; font-weight: 400; }

/* ---------- page shell (both versions) ---------- */
.street {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
  overflow: hidden;
  transform-origin: 50% 50%;
}
.street::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.street > * { position: relative; z-index: 1; }

.bar {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 0;
}
.bar__logo { display: block; color: var(--cream); line-height: 0; }
.bar__logo svg { width: clamp(120px, 16vw, 168px); height: auto; aspect-ratio: 998 / 276; }
.bar__where {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 234, 216, 0.72);
}
.bar__logo:focus-visible, .walk a:focus-visible { outline: 2px solid var(--warm); outline-offset: 4px; }

.intro { text-align: center; margin: clamp(14px, 3.2svh, 34px) 0 clamp(10px, 2.2svh, 24px); }
.intro__title {
  font-weight: 800;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--cream);
}
.intro__title em { text-transform: none; letter-spacing: -0.01em; font-size: 1.12em; color: var(--warm); }
/* Two lines, each choice starting its own. */
.intro__sub span { display: block; }
.intro__sub {
  margin-top: 10px;
  font-size: clamp(0.86rem, 0.8rem + 0.3vw, 1.05rem);
  color: rgba(243, 234, 216, 0.82);
  max-width: 34em;
  margin-inline: auto;
  text-wrap: balance;
}

/* ---------- a house: fish sign, frame, door, stoop ---------- */
.house {
  --door: var(--door-work);
  --fish-body: #c23a1b;
  --fish-fin: #8f2610;
  --fish-head: #f3ead8;
  --fish-line: #2a0f06;
  --fish-edge: #f3ead8;
  --plate: #c23a1b;
  --plate-ink: #f8f0de;
  font-size: calc(var(--dw) / 10);   /* 1em = a tenth of the door */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.house span { display: block; }
.house--fk {
  --door: var(--door-fk);
  --fish-body: #2f45d0;
  --fish-fin: #1d2c94;
  --fish-head: #d4f36b;
  --fish-line: #0b1240;
  --fish-edge: #e3e6fa;
  --plate: #15171c;
  --plate-ink: #d4f36b;
}

/* Fishtown shad sign: iron rod, the painted fish on chains, the number
   plate on two more chains under it. The fish and plate sway together. */
.fish { width: 12.4em; display: flex !important; flex-direction: column; align-items: center; margin-bottom: 0.4em; }
.fish__rod {
  width: 11.4em; height: 0.34em; border-radius: 0.2em;
  background: linear-gradient(#4a4a4e, #141416);
  position: relative;
  box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, 0.6);
}
.fish__rod::before, .fish__rod::after { /* scroll ends */
  content: ""; position: absolute; top: -0.28em; width: 0.85em; height: 0.85em; border-radius: 50%;
  border: 0.16em solid #4a4a4e;
  border-bottom-color: transparent;
}
.fish__rod::before { left: -0.55em; transform: rotate(-40deg); }
.fish__rod::after { right: -0.55em; transform: rotate(40deg); }
.fish__hang {
  position: relative;
  padding-top: 1em;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 0;
  animation: sway 5.5s ease-in-out infinite;
}
.house--fk .fish__hang { animation-delay: -2.2s; }
.fish__hang::before, .fish__hang::after { /* chains, rod to fish */
  content: ""; position: absolute; top: 0; width: 0.14em; height: 1.35em;
  background: repeating-linear-gradient(#77777c 0 0.2em, #2a2a2d 0.2em 0.3em);
}
.fish__hang::before { left: 3.2em; }
.fish__hang::after { right: 3.6em; }
.fish__shad {
  display: block;
  width: 11em;
  height: 4.6em;
  overflow: visible;
  filter: drop-shadow(0 0.35em 0.4em rgba(0, 0, 0, 0.65));
}
.fish__plate {
  position: relative;
  margin-top: 0.75em;
  padding: 0.18em 0.75em 0.12em;
  border-radius: 0.18em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--plate) 85%, #fff), var(--plate) 30%, color-mix(in srgb, var(--plate) 80%, #000));
  color: var(--plate-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1.15;
  letter-spacing: 0.08em;
  box-shadow: inset 0 0 0 0.06em rgba(255, 255, 255, 0.15), 0 0.25em 0.35em rgba(0, 0, 0, 0.6);
}
.fish__plate::before, .fish__plate::after { /* chains, fish to plate */
  content: ""; position: absolute; top: -0.55em; width: 0.09em; height: 0.6em;
  background: repeating-linear-gradient(#77777c 0 0.13em, #2a2a2d 0.13em 0.2em);
}
.fish__plate::before { left: 0.7em; }
.fish__plate::after { right: 0.7em; }
@keyframes sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }

/* Painted wood surround: cornice on top, transom, then the door. */
.frame {
  position: relative;
  padding: 0 0.75em;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.12), transparent 0.25em, transparent calc(100% - 0.25em), rgba(0,0,0,0.12)),
    var(--trim);
  box-shadow: 0 0 0 0.12em rgba(0, 0, 0, 0.4), 0.4em 0 1em rgba(0, 0, 0, 0.45), -0.4em 0 1em rgba(0, 0, 0, 0.45);
}
.cornice {
  position: relative;
  margin: 0 -0.8em 0.5em;
  height: 1.5em;
  background:
    linear-gradient(var(--trim) 0 0.45em, var(--trim-shade) 0.45em 0.55em, transparent 0.55em),
    repeating-linear-gradient(90deg, var(--trim) 0 0.45em, var(--trim-shade) 0.45em 0.75em) 0 0.55em / 100% 0.55em no-repeat,
    linear-gradient(transparent 1.1em, var(--trim) 1.1em);
  box-shadow: 0 0.35em 0.4em -0.1em rgba(0, 0, 0, 0.5);
  border-radius: 0.1em;
}
/* Transom: dark glass lit from inside, the name in gold leaf. */
.transom {
  width: 10em;
  height: 3.6em;
  display: grid !important;
  place-items: center;
  margin-bottom: 0.5em;
  background:
    radial-gradient(ellipse 70% 120% at 50% 110%, rgba(255, 190, 110, 0.55), transparent 70%),
    linear-gradient(#1b1512, #2c211b);
  box-shadow: inset 0 0 0 0.14em #b9ae99, inset 0 0.3em 0.6em rgba(0, 0, 0, 0.6);
}
.gilt {
  font-family: var(--ital);
  font-style: italic;
  font-size: 1.95em;
  line-height: 1;
  white-space: nowrap;
  padding: 0 0.12em 0.06em;
  /* Bright cream with a gold halo: the old gold-leaf gradient went too dark
     on the dark glass to read at a glance. */
  color: #fff3d6;
  text-shadow: 0 0 0.25em rgba(255, 196, 110, 0.75), 0 0.04em 0 #3b250b;
}
.gilt--long { font-size: 1.6em; }

/* The doorway: the door swings in on its hinge, showing the room behind. */
.opening {
  position: relative;
  width: 10em;
  height: 21em;
  perspective: 38em;
  perspective-origin: 50% 40%;
  overflow: hidden;
  background: #120a06;
  box-shadow: inset 0 0 0 0.12em rgba(0, 0, 0, 0.5);
}
.inside {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 60% at 50% 30%, #ffe2b0, #e3a160 45%, #6b3a1c 100%);
}
.inside__wall {
  position: absolute;
  left: 0; right: 0; top: 2em;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
}
.inside__wall img {
  width: 6.8em;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border: 0.28em solid #2b1b10;
  box-shadow: 0 0.3em 0.6em rgba(60, 25, 5, 0.45);
}
.inside__wall--gallery img:nth-child(2) { width: 5.6em; transform: rotate(-1deg); }
.inside__wall--gallery img:nth-child(3) { width: 6em; transform: rotate(0.8deg); }
.inside__wall--screen { top: 3.2em; }
.inside__wall--screen img { width: 8.4em; border: 0.35em solid #15171c; border-radius: 0.3em; }
.inside__floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 24%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0 0.08em, transparent 0.08em 1.6em),
    linear-gradient(#8a5128, #5a3016);
}

.door {
  --hinge: left;
  --open: 82deg;
  --ajar: 13deg;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 30%, transparent 55%, rgba(0, 0, 0, 0.18)),
    var(--door);
  transform-origin: var(--hinge) center;
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease), filter 0.7s var(--ease);
  box-shadow: inset 0 0 0 0.1em rgba(0, 0, 0, 0.35);
}
.house--fk .door { --hinge: right; --open: -82deg; --ajar: -13deg; }
/* The door's free edge, so it has thickness as it swings. */
.door::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: -0.3em;
  width: 0.6em;
  background: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0.25)), var(--door);
  transform: rotateY(90deg);
}
.house--fk .door::after { right: auto; left: -0.3em; }

/* Tofani face (porthole or triptych), drawn by the generator over the paint. */
.door__face { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.slot {
  position: absolute;
  left: 2.9em; top: 8.75em;
  width: 4.2em; height: 1.05em;
  border-radius: 0.15em;
  background:
    linear-gradient(transparent 0.36em, #1a0f05 0.36em calc(100% - 0.36em), transparent calc(100% - 0.36em)),
    linear-gradient(180deg, #f6db8c, var(--brass) 45%, #7a5419);
  box-shadow: 0 0.12em 0.2em rgba(0, 0, 0, 0.45);
}
.door__kick {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5em;
  background: linear-gradient(180deg, #f6db8c, var(--brass) 40%, #8a6020);
  box-shadow: inset 0 0.08em 0 rgba(255, 255, 255, 0.4);
}
.knob {
  position: absolute;
  right: 0.75em;
  top: 56%;
  width: 1.15em; height: 1.15em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4c9, var(--brass) 45%, #6e4a12);
  box-shadow: 0 0.18em 0.3em rgba(0, 0, 0, 0.5);
}
.knob::before { /* deadbolt */
  content: ""; position: absolute; left: 50%; top: -2.2em; width: 0.8em; height: 0.8em; margin-left: -0.4em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4c9, var(--brass) 50%, #6e4a12);
}
.house--fk .knob { right: auto; left: 0.75em; }

/* Philly marble steps. */
.steps { display: flex !important; flex-direction: column; align-items: center; position: relative; }
.steps i {
  display: block;
  height: 1.05em;
  background:
    linear-gradient(115deg, transparent 20%, rgba(120, 120, 130, 0.18) 21%, transparent 23%, transparent 61%, rgba(120, 120, 130, 0.14) 62%, transparent 64%),
    linear-gradient(180deg, #ffffff 0 0.22em, #e9e6df 0.22em, #c9c4b8);
  box-shadow: 0 0.25em 0.35em rgba(0, 0, 0, 0.5);
}
.steps i:nth-child(1) { width: 11.6em; }
.steps i:nth-child(2) { width: 12.4em; }
.steps i:nth-child(3) { width: 13.2em; }

.hint {
  margin-top: 0.9em;
  font-size: max(1em, 10px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(243, 234, 216, 0.7);
  transition: color 0.3s, transform 0.3s var(--ease);
}

/* Warm light that spills down the steps once the door opens. */
.house::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2.4em;
  width: 22em; height: 9em;
  margin-left: -11em;
  background: radial-gradient(ellipse 50% 60% at 50% 30%, rgba(255, 205, 130, 0.5), transparent 70%);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Hover / focus: the door comes off the latch. */
@media (hover: hover) {
  .house:hover .door { transform: rotateY(var(--ajar)); }
  .house:hover .fish__hang { animation-duration: 2.4s; }
  .house:hover .hint { color: var(--warm); transform: translateY(-2px); }
  .house:hover::after { opacity: 0.35; }
}
.house:focus-visible .door { transform: rotateY(var(--ajar)); }
.house:focus-visible .frame { outline: 3px solid var(--warm); outline-offset: 6px; }
.house:focus-visible .hint { color: var(--warm); }

/* Opened (set by doors.js on click). */
.house.is-open .door { transform: rotateY(var(--open)); transition-duration: 1s; filter: brightness(0.82); }
.house.is-open::after { opacity: 1; }
.house.is-open .hint { color: var(--warm); }
.street.is-leaving .house:not(.is-open) { filter: brightness(0.5) saturate(0.7); transition: filter 0.6s; }

/* Wall lantern. */
.lamp {
  display: flex;
  align-items: flex-start;
  font-size: calc(var(--dw) / 10);
  filter: drop-shadow(0 0 1.6em rgba(255, 190, 100, 0.6));
}
.lamp__arm { width: 0.4em; height: 3.4em; background: #3a3a3e; border-radius: 0.2em; }
.lamp__cage {
  position: relative;
  width: 2.8em; height: 4em;
  margin-left: -1.6em; margin-top: 1.6em;
  border: 0.3em solid #2a2a2d;
  border-top-width: 0.6em;
  border-radius: 0.4em 0.4em 0.2em 0.2em;
  background: radial-gradient(circle at 50% 60%, #fff3cf, #ffc261 45%, #c87628);
}
.lamp__cage::before { /* cap */
  content: ""; position: absolute; left: -0.7em; right: -0.7em; top: -1.4em; height: 0.9em;
  background: #2a2a2d; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.lamp__flame {
  position: absolute; left: 50%; bottom: 0.6em; width: 0.7em; height: 1.2em; margin-left: -0.35em;
  border-radius: 50% 50% 45% 45%;
  background: #fffaf0;
  animation: flicker 2.8s ease-in-out infinite;
}
@keyframes flicker { 0%, 100% { opacity: 1; transform: scale(1); } 40% { opacity: 0.8; transform: scale(0.92, 1.05); } 70% { opacity: 0.95; transform: scale(1.04, 0.96); } }

/* Sidewalk. */
.walk {
  align-self: stretch;
  margin: 0 -16px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  font-size: 0.78rem;
  color: #4f4a43;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(0, 0, 0, 0.12) calc(25% - 1px) 25%),
    linear-gradient(#a9a397 0 6px, #98928696 6px 8px, #b9b3a6 8px);
  box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.5);
}
.walk a { font-weight: 700; color: #221e19; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the row: a pair of joined rowhomes ---------- */
body.row {
  /* Each facade is half the screen on a phone (about 14.8 door-tenths
     wide) and at most ~2.8 door-widths on a desktop. Height: sky ~170px,
     then cornice, fish sign, door and stoop take ~4.4 door-widths; the
     upper floor gets whatever is left. */
  --dw: clamp(84px, min(calc((50vw - 10px) / 1.48), calc((100svh - 190px) / 4.75)), 210px);
}
@media (min-width: 760px) {
  body.row { --dw: clamp(110px, min(calc((50vw - 24px) / 2.75), calc((100svh - 200px) / 5.15)), 210px); }
  /* Wide enough for the front window: the fish hangs out over it, like a
     sign on a bracket, and the upper floor gets the height back. */
  body.row .house .fish { position: absolute; top: -0.6em; left: -12.6em; margin: 0; }
  body.row .house--fk .fish { left: auto; right: -12.6em; }
}
body.row .street { padding: 0; background: #07080c; }
body.row .street::before {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(80, 90, 140, 0.25), transparent 70%),
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 27% 9%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 71% 14%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 86% 6%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 58% 4%, rgba(255,255,255,0.45), transparent),
    linear-gradient(#0a0d18, #07080c 40%);
}
body.row .bar { padding: 18px 16px 0; }
body.row .intro { padding: 0 16px; margin: clamp(10px, 2.4svh, 26px) 0 clamp(12px, 2.6svh, 28px); }
body.row .intro__title { font-size: clamp(1.7rem, 1rem + 3vw, 3.6rem); }

/* The block: just our two houses, standing alone against the night. */
.block {
  flex: 1;
  align-self: stretch;
  display: flex;
  justify-content: center;
  position: relative;
}
.facade {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  width: min(50vw, 28em);
  font-size: calc(var(--dw) / 10);
  display: flex;
  flex-direction: column;
  background-color: #574339;
  background-image: var(--brick-red);
  background-size: 96px 32px, 288px 96px;
  box-shadow: 0 0 2em rgba(0, 0, 0, 0.6);
}
/* The right-hand house was painted later: a hair warmer, bricks offset. */
.facade--fk { background-position: 48px 16px, 0 0; filter: saturate(0.85) brightness(0.92); }
/* Night on the brick: darker up top, the lamp warming the middle. */
.facade::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(10, 6, 12, 0.55), rgba(10, 6, 12, 0.2) 45%, rgba(10, 6, 12, 0.35));
}
.facade > * { position: relative; }
.facade::after { /* stone base course behind the stoop */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em;
  background: linear-gradient(#5d5a55, #45423e);
  box-shadow: inset 0 0.15em 0 rgba(255, 255, 255, 0.12);
}
.roof { /* bracketed wood cornice: crown, scroll brackets, frieze */
  position: relative;
  height: 3.4em;
  margin: 0 -0.4em;
  background:
    linear-gradient(var(--trim) 0 0.8em, var(--trim-shade) 0.8em 0.95em, transparent 0.95em),
    radial-gradient(circle at 50% 100%, var(--trim-shade) 0 0.32em, transparent 0.34em) 0 0.95em / 3em 0.9em repeat-x,
    linear-gradient(90deg, transparent 0 1.1em, var(--trim) 1.1em 1.9em, transparent 1.9em) 0 0.95em / 3em 0.9em repeat-x,
    linear-gradient(transparent 1.85em, var(--trim) 1.85em 3.1em, var(--trim-shade) 3.1em);
  box-shadow: 0 0.5em 0.6em -0.2em rgba(0, 0, 0, 0.7);
  z-index: 2;
}
.facade--fk .roof {
  background:
    linear-gradient(#34363d 0 0.8em, #1d1f24 0.8em 0.95em, transparent 0.95em),
    linear-gradient(90deg, transparent 0 0.5em, #3a3c44 0.5em 1em, transparent 1em) 0 0.95em / 1.6em 0.9em repeat-x,
    linear-gradient(transparent 1.85em, #2b2d33 1.85em 3.1em, #1d1f24 3.1em);
  box-shadow: inset 0 0.12em 0 rgba(255, 255, 255, 0.12), 0 0.5em 0.6em -0.2em rgba(0, 0, 0, 0.7);
}
/* Upper floor: two windows. It takes whatever height is left and drops the
   windows when there is not room for them. */
.upper {
  flex: 1;
  min-height: 0;
  container-type: size;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.6em 1.2em 0;
}
.win {
  position: relative;
  width: 5.6em;
  height: 7em;
  border: 0.45em solid var(--trim);
  background:
    linear-gradient(90deg, transparent calc(50% - 0.12em), var(--trim) calc(50% - 0.12em) calc(50% + 0.12em), transparent calc(50% + 0.12em)),
    linear-gradient(transparent calc(50% - 0.12em), var(--trim) calc(50% - 0.12em) calc(50% + 0.12em), transparent calc(50% + 0.12em)),
    linear-gradient(150deg, rgba(255, 255, 255, 0.12), transparent 40%),
    linear-gradient(#1a2031, #0e111b);
  box-shadow: 0 0 0 0.12em rgba(0, 0, 0, 0.5);
}
.win--lit {
  background:
    linear-gradient(90deg, transparent calc(50% - 0.12em), var(--trim) calc(50% - 0.12em) calc(50% + 0.12em), transparent calc(50% + 0.12em)),
    linear-gradient(transparent calc(50% - 0.12em), var(--trim) calc(50% - 0.12em) calc(50% + 0.12em), transparent calc(50% + 0.12em)),
    repeating-linear-gradient(rgba(120, 70, 20, 0.25) 0 0.12em, transparent 0.12em 0.6em),
    radial-gradient(ellipse at 50% 80%, #ffd391, #d58a3c 70%, #7a4114);
  box-shadow: 0 0 0 0.12em rgba(0, 0, 0, 0.5), 0 0 2.2em rgba(255, 180, 90, 0.35);
}
.win::before { /* stone lintel */
  content: ""; position: absolute; left: -1em; right: -1em; top: -1.5em; height: 1em;
  background: linear-gradient(#e7e2d6, #bdb6a6);
  box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, 0.5);
}
.win::after { /* sill */
  content: ""; position: absolute; left: -0.8em; right: -0.8em; bottom: -1.1em; height: 0.65em;
  background: linear-gradient(#e7e2d6, #a9a292);
  box-shadow: 0 0.25em 0.3em rgba(0, 0, 0, 0.55);
}
@container (max-height: 9.8em) { .upper .win { display: none; } }

/* Ground floor: the front window and the door, mirrored so the two doors
   sit either side of the party wall. */
.ground {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5em;
  padding: 0 1.3em;
  position: relative;
  z-index: 1;
}
.facade--fk .ground { flex-direction: row-reverse; }
.win--front {
  width: 8em;
  height: 12em;
  margin-bottom: 5.8em;
  align-self: flex-end;
}
@media (max-width: 759px) {
  .win--front { display: none; }
  .ground { justify-content: center; padding: 0 0.5em; }
}
/* On the row, the stoop steps down onto the sidewalk, and the hint goes on
   the pavement in front of it. */
body.row .house .steps { margin-bottom: -1.2em; z-index: 2; }
body.row .hint { position: absolute; top: 100%; margin-top: 1.9em; color: #14110e; }
/* On the light pavement the hint stays dark; hover and open pick up the door colour. */
@media (hover: hover) { body.row .house:hover .hint { color: var(--door); } }
body.row .house:focus-visible .hint, body.row .house.is-open .hint { color: var(--door); }
body.row .walk { margin: 0; padding-top: calc(var(--dw) * 0.42); color: #4f4a43; position: relative; z-index: 0; }

/* Fan stickers, small, in the lower corner of the front window. On a phone
   the front window is hidden, so the sticker moves to the door glass. */
.decal {
  position: absolute;
  width: 2.3em;
  height: 2.3em;
  filter: drop-shadow(0 0.05em 0.08em rgba(0, 0, 0, 0.45));
}
.win .decal { left: 0.55em; bottom: 0.55em; }
.upper .win .decal { width: 1.8em; height: 1.8em; left: 0.4em; bottom: 0.4em; }
.facade--fk .win .decal { left: auto; right: 0.55em; }
.door .decal { display: none; left: 3em; top: 4.8em; width: 1.6em; height: 1.6em; }
.house--fk .door .decal { left: 4.35em; top: 5.8em; width: 1.3em; height: 1.3em; }
@media (max-width: 759px) { body.row .door .decal { display: block; } }

/* The party wall: a downspout down the seam, the shared lamp on it. */
.seam {
  position: relative;
  z-index: 3;
  width: 0;
  display: flex !important;
  justify-content: center;
}
.seam__pipe {
  position: absolute; top: 2.4em; bottom: 2.2em; left: -0.35em; width: 0.7em;
  font-size: calc(var(--dw) / 10);
  background:
    repeating-linear-gradient(transparent 0 7em, #2a2a2d 7em 7.4em),
    linear-gradient(90deg, #26262a, #55555b 40%, #2a2a2e);
  box-shadow: 0 0 0.6em rgba(0, 0, 0, 0.7);
}
.seam .lamp { position: absolute; bottom: calc(var(--dw) * 2.3); left: 0; transform: translateX(-0.2em) scale(0.85); transform-origin: left bottom; }
@media (max-width: 759px) { .seam .lamp { display: none; } }

/* Through the door: the scene zooms into the open doorway, then this warm
   wash covers the switch to the next page. */
.street.is-entering { transition: transform 0.85s cubic-bezier(0.55, 0, 0.75, 0.2); }
.through {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 45%, #fff2d6, #f2c487 60%, #c9844a);
  transition: opacity 0.45s ease-in;
  z-index: 10;
}
.through.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fish__hang, .lamp__flame { animation: none; }
  .door, .street.is-entering { transition: none !important; }
}