/* odalar — kaosun estetiği
   leke, öküz kanı, pirinç, is, kaymış baskı.
   şablon yok. */

:root {
  --soot: #090807;
  --paper: #16110c;
  --paper-2: #1f1710;
  --stain: #3a2216;
  --ox: #7a1e27;
  --ox-hot: #a32d38;
  --brass: #c6a15c;
  --brass-dim: #8c7340;
  --ivory: #eadcc6;
  --ivory-dim: #b9a68c;
  --mis-r: #c45a4a;
  --mis-c: #3f6d58;
  --rule: rgba(198, 161, 92, 0.35);
  --sans: "Syne", "Arial Narrow", sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--soot); }

body {
  min-height: 100vh;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.45;
  background:
    radial-gradient(ellipse 80% 50% at 12% -10%, rgba(122, 30, 39, 0.28), transparent 50%),
    radial-gradient(ellipse 60% 40% at 92% 8%, rgba(62, 40, 18, 0.55), transparent 55%),
    radial-gradient(ellipse 50% 35% at 70% 95%, rgba(20, 12, 8, 0.9), transparent 60%),
    radial-gradient(ellipse 30% 20% at 18% 72%, rgba(122, 30, 39, 0.18), transparent 70%),
    linear-gradient(165deg, var(--paper) 0%, var(--paper-2) 42%, #120e0a 100%);
  overflow-x: hidden;
}

/* scan-dust / grain */
.grain {
  pointer-events: none;
  position: fixed;
  inset: -20%;
  z-index: 80;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation: drift 48s linear infinite;
}
.stains {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 8% 30%, rgba(90, 22, 28, 0.22) 0 12%, transparent 42%),
    radial-gradient(circle at 88% 62%, rgba(40, 28, 14, 0.45) 0 10%, transparent 38%),
    radial-gradient(circle at 40% 88%, rgba(12, 8, 6, 0.5) 0 14%, transparent 40%);
}

@keyframes drift {
  from { transform: translate3d(0,0,0) rotate(0.01deg); }
  50% { transform: translate3d(-2%, 1.4%, 0) rotate(-0.4deg); }
  to { transform: translate3d(0,0,0) rotate(0.01deg); }
}

a {
  color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { color: var(--ox-hot); }

.wrap {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.4rem 0 4.5rem;
}

/* masthead — one huge word colliding with captions */
.mast {
  position: relative;
  min-height: 42vh;
  padding: 1.2rem 0 0.5rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
}
.kicker {
  grid-column: 1 / 6;
  grid-row: 1;
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass-dim);
  transform: rotate(-3deg);
  z-index: 5;
}
.word {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(4.6rem, 19vw, 13.4rem);
  line-height: 0.72;
  letter-spacing: -0.07em;
  text-transform: uppercase;
  color: var(--ivory);
  z-index: 2;
  position: relative;
}
.misreg { isolation: isolate; }
.misreg::before,
.misreg::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.misreg::before {
  color: var(--mis-r);
  transform: translate(-3px, 2px);
  mix-blend-mode: screen;
  opacity: 0.55;
  z-index: -1;
}
.misreg::after {
  color: var(--mis-c);
  transform: translate(4px, -1px);
  mix-blend-mode: multiply;
  opacity: 0.35;
  z-index: -1;
}
.collide {
  grid-column: 7 / 13;
  grid-row: 2;
  margin: 0 0 0.4rem;
  font-size: clamp(1.05rem, 2.2vw, 1.55rem);
  font-style: italic;
  color: var(--ivory-dim);
  transform: rotate(4.2deg) translateY(38%);
  z-index: 6;
  text-align: right;
  mix-blend-mode: difference;
}
.collide .frag {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ox-hot);
  mix-blend-mode: normal;
}

/* cephe — stained-paper elevation. rooms are windows. */
.street-scene {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 1.5rem));
  margin: 0 auto;
  padding: 2.6rem 0 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(210px, 272px);
  grid-template-areas:
    "lamp facade agac"
    "pave pave pave";
  align-items: end;
  column-gap: 0.4rem;
  row-gap: 0;
}
.lamp { grid-area: lamp; }
.facade { grid-area: facade; }
.pavement { grid-area: pave; }
.agac { grid-area: agac; }

.lamp {
  position: relative;
  align-self: stretch;
  z-index: 4;
  pointer-events: none;
  transform: rotate(-2.2deg) translateY(8%);
}
.lamp .post {
  position: absolute;
  left: 14px;
  bottom: 0;
  top: 18%;
  width: 7px;
  background:
    linear-gradient(180deg, var(--brass) 0 8px, var(--brass-dim) 8px, #2a1c10 100%);
  box-shadow: 2px 0 0 #120c08, inset 1px 0 0 rgba(234, 220, 198, 0.2);
}
.lamp .arm {
  position: absolute;
  top: 18%;
  left: 16px;
  width: 34px;
  height: 8px;
  background: linear-gradient(90deg, var(--brass), var(--brass-dim));
  clip-path: polygon(0 40%, 88% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 2px 0 #120c08;
}
.lamp .lantern {
  position: absolute;
  top: 12%;
  left: 38px;
  width: 18px;
  height: 26px;
  background:
    linear-gradient(180deg, var(--brass) 0 4px, transparent 4px),
    linear-gradient(180deg, rgba(234, 220, 198, 0.92), rgba(198, 161, 92, 0.35) 70%, #3a2210);
  border: 1px solid var(--brass-dim);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  box-shadow:
    0 0 18px rgba(234, 220, 198, 0.35),
    0 0 40px rgba(198, 161, 92, 0.18);
}
.lamp .pool {
  position: absolute;
  left: 6px;
  right: -24px;
  bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(234, 220, 198, 0.07), transparent 70%);
  mix-blend-mode: screen;
}

.facade {
  position: relative;
  isolation: isolate;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(38, 26, 18, 0.55) 0 13px,
      rgba(22, 16, 11, 0.35) 13px 14px
    ),
    radial-gradient(ellipse 70% 40% at 18% 8%, rgba(122, 30, 39, 0.28), transparent 55%),
    radial-gradient(ellipse 50% 30% at 88% 70%, rgba(18, 10, 8, 0.7), transparent 60%),
    linear-gradient(168deg, #2a1c14 0%, #1a120e 38%, #14100c 72%, #100c09 100%);
  border: 1px solid rgba(198, 161, 92, 0.38);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.55),
    inset 0 0 80px rgba(8, 4, 2, 0.45),
    inset 0 0 0 10px rgba(26, 16, 12, 0.4);
  clip-path: polygon(
    1.2% 0.8%, 4% 0%, 12% 0.6%, 28% 0%, 47% 0.5%, 63% 0%, 81% 0.4%, 96% 0%, 100% 1.6%,
    99.4% 22%, 100% 48%, 99.2% 74%, 100% 96%,
    97% 100%, 78% 99.2%, 52% 100%, 31% 99%, 8% 100%, 0% 97%,
    0.6% 70%, 0% 44%, 0.8% 18%
  );
  transform: rotate(-0.35deg);
  overflow: hidden;
}
.facade::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    repeating-linear-gradient(-18deg, transparent 0 17px, rgba(198, 161, 92, 0.025) 17px 18px),
    radial-gradient(circle at 12% 36%, rgba(122, 30, 39, 0.16), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(40, 24, 12, 0.35), transparent 32%);
  mix-blend-mode: multiply;
}

.parapet {
  display: block;
  height: 14px;
  margin: 0 5% 0 4%;
  background:
    linear-gradient(180deg, #3a2a1c 0%, #1e1410 100%);
  box-shadow:
    0 3px 0 var(--brass-dim),
    inset 0 1px 0 rgba(234, 220, 198, 0.18);
  transform: translateY(-8px);
  clip-path: polygon(0 40%, 4% 0, 96% 0, 100% 40%, 100% 100%, 0 100%);
}
.quoin {
  position: absolute;
  top: 18px;
  bottom: 22px;
  width: 18px;
  z-index: 6;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    #3a2a1c 0 22px,
    #1a120c 22px 24px,
    #2a1c14 24px 46px,
    #120e0a 46px 48px
  );
  box-shadow: inset 0 0 0 1px rgba(198, 161, 92, 0.22);
  opacity: 0.92;
}
.q-l { left: 0; }
.q-r { right: 0; }

.cornice {
  position: relative;
  z-index: 4;
  padding: 0.35rem 1.7rem 0.85rem;
  margin: 0 0.4rem;
  border-bottom: 7px solid transparent;
  background:
    linear-gradient(var(--brass-dim), var(--brass-dim)) left bottom / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, var(--brass-dim) 0 11px, transparent 11px 17px) left bottom / 100% 14px no-repeat,
    linear-gradient(180deg, rgba(42, 28, 20, 0.2), rgba(12, 8, 6, 0.55));
  text-align: center;
}
.cornice .sign {
  margin: 0 0 0.15rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brass);
  transform: rotate(-1.1deg);
}
.cephe .word {
  font-size: clamp(2.55rem, 9.2vw, 6.2rem);
  line-height: 0.76;
  margin: 0;
  text-align: center;
  overflow: visible;
}
.cornice .motto {
  margin: 0.15rem 0 0.2rem;
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  font-style: italic;
  color: var(--ivory-dim);
  transform: rotate(2.4deg);
}
.cornice .motto .frag {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ox-hot);
}

.storey {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.15rem 1.25rem;
  padding: 1.05rem 2.1rem 1.15rem;
}
.storey::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--brass-dim) 8%, var(--brass) 50%, var(--brass-dim) 92%, transparent);
  opacity: 0.55;
  pointer-events: none;
}
.storey-ground {
  grid-template-columns: 1fr 1.2fr 1fr;
  padding-top: 1.25rem;
  padding-bottom: 0.35rem;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(18, 10, 8, 0.0) 0 16px,
      rgba(0, 0, 0, 0.22) 16px 18px
    );
}

.win {
  position: relative;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  min-height: 13.2rem;
  transform: rotate(-0.4deg);
  transition: transform 0.4s ease, filter 0.3s ease;
}
.w00 { transform: rotate(-0.8deg); }
.w04 { transform: rotate(0.5deg); }
.w06 { transform: rotate(-0.3deg); }
.w02 { transform: rotate(0.6deg); }
.w01 { transform: rotate(-0.7deg); }
.w03 { transform: rotate(1.1deg); }
.win .lintel {
  display: block;
  height: 9px;
  background: linear-gradient(180deg, var(--brass) 0%, var(--brass-dim) 55%, #2a1c0c 100%);
  box-shadow: 0 2px 0 #120c08;
  clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%);
}
.win .sill {
  display: block;
  height: 11px;
  background: linear-gradient(180deg, #c6a15c 0%, #8c7340 40%, #2a1c0c 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
}
.win .glass {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.7rem 0.75rem 0.8rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(80, 90, 88, 0.12) 0 18%, transparent 42%),
    linear-gradient(165deg, #1a1410 0%, #0c0908 55%, #140c0c 100%);
  border-left: 7px solid #3a2a18;
  border-right: 7px solid #241810;
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(198, 161, 92, 0.28);
}
.win .glass::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 46%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 110%, rgba(198, 161, 92, 0.22), transparent 68%);
}
.win .no {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  color: var(--ox-hot);
}
.win h2 {
  margin: 0.2rem 0 0.28rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: lowercase;
}
.win p {
  margin: 0;
  color: var(--ivory-dim);
  font-size: 0.92rem;
  line-height: 1.3;
  max-width: 22ch;
}
.win:hover,
.win:focus-visible {
  color: var(--ivory);
  filter: contrast(1.08) saturate(1.12);
  z-index: 8;
  outline: none;
}
.win:hover .glass,
.win:focus-visible .glass {
  background:
    linear-gradient(180deg, rgba(198, 161, 92, 0.08) 0 16%, transparent 40%),
    radial-gradient(ellipse 70% 60% at 50% 80%, rgba(163, 45, 56, 0.28), transparent 70%),
    linear-gradient(165deg, #241818 0%, #140c0c 60%, #1a1010 100%);
}
.win:hover h2,
.win:focus-visible h2 {
  text-shadow: 2px 0 var(--mis-r), -2px 0 var(--mis-c);
}

.win.muntin .glass::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(140, 115, 64, 0.55), rgba(140, 115, 64, 0.55)) center / 100% 2px no-repeat,
    linear-gradient(rgba(140, 115, 64, 0.55), rgba(140, 115, 64, 0.55)) 33% / 2px 100% no-repeat,
    linear-gradient(rgba(140, 115, 64, 0.55), rgba(140, 115, 64, 0.55)) 67% / 2px 100% no-repeat;
  opacity: 0.55;
}

.win.barred .glass {
  background:
    linear-gradient(165deg, #120c0a 0%, #0a0706 70%, #140c0c 100%);
  filter: brightness(0.72);
}
.win.barred .glass::before { opacity: 0.15; }
.win.barred .shutter {
  position: absolute;
  inset: 9px 7px auto 7px;
  height: 26%;
  z-index: 4;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      #2a1810 0 11px,
      #1a100c 11px 12px,
      #3a2216 12px 23px,
      #120c0a 23px 24px
    );
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.45);
  opacity: 0.88;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
}
.win.barred .bars {
  position: absolute;
  inset: 18% 10% 14%;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    var(--brass-dim) 0 4px,
    #2a1c0c 4px 5px,
    transparent 5px 26px
  );
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
}
.win.barred:hover .glass,
.win.barred:focus-visible .glass {
  filter: brightness(0.9);
}

.win.glitched {
  animation: pane-flicker 5.4s steps(2, end) infinite;
}
.win.glitched .glass {
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.28) 2px 3px),
    repeating-linear-gradient(92deg, transparent 0 13px, rgba(63, 109, 88, 0.12) 13px 14px),
    linear-gradient(148deg, rgba(63, 109, 88, 0.28) 0%, rgba(122, 30, 39, 0.45) 42%, #100c09 100%);
  border-left-color: var(--mis-c);
  border-right-color: var(--mis-r);
  box-shadow:
    inset 6px 0 0 rgba(196, 90, 74, 0.35),
    inset -5px 0 0 rgba(63, 109, 88, 0.3);
}
.win.glitched .glass::before {
  background: radial-gradient(ellipse at 50% 110%, rgba(63, 109, 88, 0.32), transparent 68%);
}
.win.glitched h2 {
  text-shadow: 3px 0 var(--mis-r), -3px 0 var(--mis-c);
  letter-spacing: -0.08em;
}
.win.glitched .no { color: var(--mis-c); }

@keyframes pane-flicker {
  0%, 86%, 100% { filter: none; }
  88% { filter: contrast(1.3) saturate(1.4) hue-rotate(-8deg); }
  92% { filter: contrast(0.9) brightness(1.1); }
}

.blind {
  min-height: 100%;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(42, 28, 20, 0.7) 0 14px,
      rgba(16, 10, 8, 0.85) 14px 16px
    );
  border: 1px solid rgba(198, 161, 92, 0.16);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35);
  clip-path: polygon(4% 0, 96% 2%, 100% 100%, 0 98%);
  opacity: 0.9;
}

.portal {
  position: relative;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  min-height: 14.5rem;
  transform: rotate(-0.2deg);
  transition: filter 0.3s ease, transform 0.4s ease;
}
.portal .transom {
  display: block;
  padding: 0.28rem 0.4rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-align: center;
  color: var(--brass);
  background:
    linear-gradient(180deg, rgba(80, 90, 88, 0.16), #120c0a);
  border: 1px solid var(--brass-dim);
  border-bottom: 0;
}
.portal .transom .no { color: var(--ox-hot); letter-spacing: 0.28em; }
.portal .leaf {
  position: relative;
  flex: 1;
  padding: 1.4rem 1rem 1.5rem 1.35rem;
  background:
    linear-gradient(180deg, rgba(198, 161, 92, 0.22) 0 8px, transparent 8px),
    linear-gradient(155deg, rgba(90, 28, 32, 0.62) 0%, rgba(22, 14, 10, 0.96) 48%, #110c09 100%);
  border: 1px solid var(--brass-dim);
  box-shadow:
    inset 0 0 0 1px rgba(198, 161, 92, 0.16),
    inset 10px 0 0 rgba(198, 161, 92, 0.4),
    inset 0 0 48px rgba(122, 30, 39, 0.16);
  clip-path: polygon(2% 0, 98% 0, 100% 96%, 50% 100%, 0 96%);
}
.portal .knob {
  position: absolute;
  right: 1.05rem;
  top: 48%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #eadcc6, var(--brass) 45%, var(--brass-dim));
  box-shadow: 0 2px 0 #1a1008, 0 0 0 3px rgba(26, 16, 8, 0.5);
}
.portal h2 {
  margin: 0.2rem 0 0.35rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: lowercase;
}
.portal p {
  margin: 0;
  max-width: 18ch;
  color: var(--ivory-dim);
  font-size: 0.95rem;
}
.portal .step {
  display: block;
  height: 14px;
  margin: 0 6%;
  background: linear-gradient(180deg, #c6a15c, #5a4624);
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
}
.portal:hover,
.portal:focus-visible {
  color: var(--ivory);
  filter: contrast(1.1) saturate(1.12);
  outline: none;
}
.portal:hover h2,
.portal:focus-visible h2 {
  text-shadow: 2px 0 var(--mis-r), -2px 0 var(--mis-c);
}

.plinth {
  height: 18px;
  margin: 0.2rem 0 0;
  background:
    linear-gradient(180deg, #2a1c14 0%, #0e0a08 100%);
  box-shadow: inset 0 1px 0 rgba(198, 161, 92, 0.25);
}

/* carved public tree — letterpress plaque, not a <pre> dump.
   kasa / integrity / hash.go / tree.go do not live here. */
.agac {
  position: relative;
  z-index: 5;
  align-self: end;
  margin: 0 0 0.15rem -0.85rem;
  padding: 1.05rem 0.85rem 1.15rem 0.95rem;
  color: var(--ivory);
  background:
    radial-gradient(ellipse 80% 40% at 20% 0%, rgba(122, 30, 39, 0.28), transparent 55%),
    repeating-linear-gradient(180deg, rgba(42, 28, 18, 0.35) 0 11px, rgba(16, 10, 8, 0.2) 11px 12px),
    linear-gradient(168deg, #24180f 0%, #140e0a 48%, #0e0a08 100%);
  border: 1px solid rgba(198, 161, 92, 0.42);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.48),
    inset 0 0 0 1px rgba(198, 161, 92, 0.12),
    inset 0 0 40px rgba(8, 4, 2, 0.45);
  clip-path: polygon(
    4% 1.5%, 92% 0%, 100% 6%, 98.5% 48%, 100% 94%,
    91% 100%, 8% 98.5%, 0% 92%, 1.6% 52%, 0% 8%
  );
  transform: rotate(1.8deg);
  overflow: hidden;
}
.agac .canopy {
  position: absolute;
  left: -18%;
  right: -22%;
  top: -16%;
  height: 38%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 55% at 28% 62%, rgba(122, 30, 39, 0.55), transparent 70%),
    radial-gradient(ellipse 36% 50% at 62% 48%, rgba(58, 34, 22, 0.7), transparent 68%),
    radial-gradient(ellipse 30% 40% at 78% 70%, rgba(20, 12, 8, 0.65), transparent 70%);
  mix-blend-mode: multiply;
  transform: rotate(-8deg);
}
.agac .screw {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #eadcc6, var(--brass) 40%, var(--brass-dim));
  box-shadow: 0 1px 0 #1a1008, inset 0 0 0 1px rgba(26, 16, 8, 0.35);
  z-index: 3;
}
.agac .screw::after {
  content: "";
  position: absolute;
  inset: 35% 15%;
  background: #2a1c10;
  transform: rotate(28deg);
  opacity: 0.7;
}
.agac .s1 { top: 10px; left: 10px; }
.agac .s2 { top: 12px; right: 12px; }
.agac .s3 { bottom: 12px; left: 11px; }
.agac .s4 { bottom: 14px; right: 13px; }
.agac-kicker {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  transform: rotate(-2.4deg);
}
.agac-note {
  position: relative;
  z-index: 2;
  margin: 0.12rem 0 0.55rem;
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ox-hot);
  transform: rotate(1.6deg);
}
.agac .carve {
  position: relative;
  z-index: 2;
  padding: 0.15rem 0 0.2rem 1.05rem;
}
.agac .carve::before {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 1.35rem;
  bottom: 0.55rem;
  width: 4px;
  background:
    linear-gradient(180deg, var(--brass) 0%, var(--brass-dim) 18%, #3a2216 52%, var(--ox) 78%, #1a100c 100%);
  box-shadow: 1px 0 0 rgba(8, 4, 2, 0.7), inset 1px 0 0 rgba(234, 220, 198, 0.18);
  border-radius: 2px 1px 0 0;
}
.root-name {
  margin: 0 0 0.35rem -0.15rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  color: var(--ivory);
  text-shadow: 2px 0 var(--mis-r), -1px 0 var(--mis-c);
  transform: rotate(-1.1deg);
}
.agac .limbs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.agac .limb {
  position: relative;
  margin: 0;
  padding: 0.12rem 0 0.12rem 0.15rem;
}
.agac .limb::before {
  content: "";
  position: absolute;
  left: -0.78rem;
  top: 0.72em;
  width: 0.82rem;
  height: 2px;
  background: linear-gradient(90deg, var(--brass-dim), var(--brass));
  box-shadow: 0 1px 0 #120c08;
}
.agac .limb::after {
  content: "";
  position: absolute;
  left: -0.05rem;
  top: 0.58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 1px 0 #120c08;
}
.agac .limb a {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 0.08rem 0.15rem 0.12rem;
  line-height: 1.15;
}
.agac .limb .nm {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: -0.03em;
  color: var(--ivory);
}
.agac .limb .scar {
  display: block;
  margin-top: 0.08rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: var(--ivory-dim);
  max-width: 22ch;
}
.agac .limb a:hover,
.agac .limb a:focus-visible {
  color: var(--ivory);
  outline: none;
}
.agac .limb a:hover .nm,
.agac .limb a:focus-visible .nm {
  text-shadow: 2px 0 var(--mis-r), -2px 0 var(--mis-c);
  color: var(--brass);
}
.agac .l00 { transform: rotate(-1.4deg); }
.agac .l01 { transform: rotate(1.8deg); margin-left: 0.15rem; }
.agac .l02 { transform: rotate(-0.6deg); }
.agac .l03 { transform: rotate(2.4deg); margin-left: 0.2rem; }
.agac .l04 { transform: rotate(-1.1deg); }
.agac .l05 { transform: rotate(0.9deg); }
.agac .l06 { transform: rotate(-1.8deg); }
.agac .l-docs { transform: rotate(1.2deg); margin-top: 0.12rem; }

.agac .limb.pruned::before {
  width: 0.42rem;
  background: repeating-linear-gradient(90deg, var(--ox) 0 3px, transparent 3px 5px);
  transform: rotate(-18deg);
  transform-origin: left center;
}
.agac .limb.pruned::after {
  background: var(--ox-hot);
  clip-path: polygon(0 40%, 70% 0, 100% 50%, 70% 100%, 0 60%);
  border-radius: 0;
  width: 8px;
  height: 8px;
  top: 0.48em;
}
.agac .limb.pruned .nm {
  color: var(--ivory-dim);
  text-decoration: line-through;
  text-decoration-color: var(--ox);
  text-decoration-thickness: 1px;
}
.agac .limb.pruned .scar { color: var(--ox-hot); }
.agac .limb.pruned a:hover .nm {
  text-decoration: none;
  color: var(--ivory);
}

.agac .limb.parasite::before {
  background: linear-gradient(90deg, var(--mis-c), var(--mis-r));
  transform: skewX(-18deg);
}
.agac .limb.parasite::after {
  background: var(--mis-c);
  box-shadow: 2px 0 0 var(--mis-r);
}
.agac .limb.parasite .nm {
  letter-spacing: -0.06em;
  text-shadow: 2px 0 var(--mis-r), -2px 0 var(--mis-c);
}
.agac .limb.parasite .scar { color: var(--mis-c); }

.agac .limb.last::before {
  width: 0.82rem;
  height: 2px;
}
.agac .limb.last .nm { color: var(--brass); }

.pavement {
  position: relative;
  z-index: 2;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  transform: rotate(0.2deg);
  padding: 0 0 1.2rem;
}
.pavement::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 18%;
  top: -18px;
  height: 28px;
  pointer-events: none;
  background: radial-gradient(ellipse at 40% 0%, rgba(0, 0, 0, 0.55), transparent 70%);
}
.pavement .curb {
  display: block;
  height: 12px;
  background: linear-gradient(180deg, #d4b56a, var(--brass-dim) 42%, #2a1c10 78%, #120c08);
  box-shadow: 0 2px 0 #080604, 0 8px 16px rgba(0,0,0,0.35);
}
.pavement .gutter {
  display: block;
  height: 9px;
  background: linear-gradient(90deg, #1a100c, #5a181c 36%, #2a1010 58%, #0c0806);
}
.pavement .cobble {
  display: block;
  height: 64px;
  background:
    repeating-linear-gradient(90deg, rgba(42, 32, 22, 0.5) 0 18px, rgba(12, 8, 6, 0.4) 18px 20px),
    repeating-linear-gradient(0deg, rgba(26, 18, 12, 0.6) 0 10px, rgba(8, 6, 4, 0.5) 10px 12px),
    #14100c;
}

.cephe .colophon { padding-top: 1.4rem; }

.is { color: var(--brass); font-size: 0.85em; }

/* door strip — persistent walk to 05 */
.strip {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 0.2rem;
  padding: 0.15rem 0 0.55rem;
  border-bottom: 1px solid var(--rule);
  transform: rotate(-0.7deg);
  font-family: var(--sans);
}
.strip .to-doors {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ox-hot);
  text-decoration: none;
  border-bottom: 1px solid rgba(163, 45, 56, 0.45);
  padding-bottom: 0.08em;
}
.strip .to-doors:hover { color: var(--brass); }

/* hall of doors — brass/oxblood plates, not a list */
.hall {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  margin-top: -0.4rem;
  padding-bottom: 5.5rem;
  position: relative;
}
.hall-kicker {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brass-dim);
  z-index: 8;
  pointer-events: none;
}
.k-acik    { grid-column: 1 / 4;  transform: rotate(-8deg);  margin-top: 0.4rem; }
.k-gurultu { grid-column: 9 / 13; transform: rotate(11deg);  margin-top: 1.6rem; color: var(--mis-c); }
.k-kilit   { grid-column: 1 / 5;  transform: rotate(-6deg);  margin-top: 2.2rem; color: var(--ox-hot); }

.door {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 1.55rem 1.35rem 1.75rem 1.7rem;
  background:
    linear-gradient(180deg, rgba(198, 161, 92, 0.22) 0 7px, transparent 7px),
    linear-gradient(155deg, rgba(90, 28, 32, 0.55) 0%, rgba(22, 14, 10, 0.96) 48%, #110c09 100%);
  border: 1px solid var(--brass-dim);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.52),
    inset 0 0 0 1px rgba(198, 161, 92, 0.16),
    inset 8px 0 0 rgba(198, 161, 92, 0.38),
    inset 0 0 48px rgba(122, 30, 39, 0.14);
  clip-path: polygon(
    3% 0%, 97% 1.4%, 100% 7%, 99% 48%, 100% 93%,
    96% 100%, 4% 98.6%, 0% 92%, 1.4% 50%, 0% 8%
  );
  overflow: hidden;
  transition: transform 0.45s ease, filter 0.3s ease, color 0.2s;
}
.door::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 18%, rgba(198, 161, 92, 0.14), transparent 36%),
    repeating-linear-gradient(-18deg, transparent 0 13px, rgba(198, 161, 92, 0.035) 13px 14px);
}
.door .no {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  color: var(--ox-hot);
}
.door .state {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass-dim);
}
.door h2 {
  margin: 0.45rem 0 0.4rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.55rem, 3.6vw, 2.35rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: lowercase;
}
.door p {
  margin: 0;
  max-width: 26ch;
  color: var(--ivory-dim);
  font-size: 0.98rem;
}
.door:hover {
  color: var(--ivory);
  filter: contrast(1.1) saturate(1.12);
  z-index: 9 !important;
}
.door:hover h2 { text-shadow: 2px 0 var(--mis-r), -2px 0 var(--mis-c); }

.door.lock {
  background:
    linear-gradient(180deg, rgba(122, 30, 39, 0.45) 0 7px, transparent 7px),
    linear-gradient(165deg, #2a1014 0%, #0e0908 62%, #080605 100%);
  border-color: var(--ox);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(122, 30, 39, 0.4),
    inset 8px 0 0 rgba(74, 16, 22, 0.85),
    inset 0 0 56px rgba(0, 0, 0, 0.35);
  color: var(--ivory-dim);
}
.door.lock .bar {
  position: absolute;
  left: -8%;
  right: -8%;
  top: 46%;
  height: 11px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #2a1c0c 0%,
    var(--brass-dim) 12%,
    var(--brass) 38%,
    #e8d09a 50%,
    var(--brass) 62%,
    var(--brass-dim) 88%,
    #2a1c0c 100%
  );
  box-shadow:
    0 5px 0 #1a0e08,
    0 8px 14px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 230, 180, 0.35);
  transform: rotate(-1.8deg);
}
.door.lock .bar::before,
.door.lock .bar::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 14px;
  height: 20px;
  background:
    radial-gradient(circle at 40% 35%, #eadcc6 0 18%, var(--brass) 19% 55%, var(--brass-dim) 70%);
  border-radius: 2px;
  box-shadow: 0 2px 0 #1a1008;
}
.door.lock .bar::before { left: 18%; }
.door.lock .bar::after  { right: 18%; }
.door.lock h2 { opacity: 0.82; }

.door.noise {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      rgba(0, 0, 0, 0.22) 2px 3px
    ),
    repeating-linear-gradient(
      92deg,
      transparent 0 15px,
      rgba(63, 109, 88, 0.08) 15px 16px
    ),
    linear-gradient(148deg, rgba(63, 109, 88, 0.32) 0%, rgba(122, 30, 39, 0.5) 38%, #100c09 100%);
  border-color: var(--mis-c);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.5),
    inset 8px 0 0 rgba(196, 90, 74, 0.45),
    inset -6px 0 0 rgba(63, 109, 88, 0.35);
  filter: contrast(1.15) saturate(1.2);
}
.door.noise::after {
  content: "";
  position: absolute;
  inset: 8% -4% 12% auto;
  width: 38%;
  background: repeating-linear-gradient(
    180deg,
    rgba(196, 90, 74, 0.18) 0 3px,
    transparent 3px 7px
  );
  mix-blend-mode: screen;
  pointer-events: none;
  transform: skewY(-8deg);
  opacity: 0.7;
}
.door.noise h2 {
  text-shadow: 3px 0 var(--mis-r), -3px 0 var(--mis-c);
  letter-spacing: -0.08em;
}
.door.noise .state { color: var(--mis-c); }

.d1 { grid-column: 1 / 7;  z-index: 3; transform: rotate(-3.2deg); margin-top: 0.8rem; }
.d2 { grid-column: 6 / 13; z-index: 5; transform: rotate(4.1deg);  margin-top: 4.6rem; margin-left: -6%; }
.d3 { grid-column: 2 / 8;  z-index: 2; transform: rotate(-1.6deg); margin-top: -1.8rem; }
.d4 { grid-column: 7 / 13; z-index: 4; transform: rotate(2.8deg);  margin-top: 0.4rem; }
.d5 { grid-column: 1 / 8;  z-index: 3; transform: rotate(-4.4deg); margin-top: -0.6rem; }
.d6 { grid-column: 5 / 13; z-index: 6; transform: rotate(-4.8deg) skewX(-2deg); margin-top: 0.2rem; }
.d7 { grid-column: 3 / 11; z-index: 7; transform: rotate(3.3deg);  margin-top: 1.4rem; }
.d8 { grid-column: 7 / 13; z-index: 5; transform: rotate(2.4deg);  margin-top: -0.8rem; }
.d9 { grid-column: 1 / 8;  z-index: 6; transform: rotate(-5.2deg) skewX(-1deg); margin-top: 0.6rem; }

/* inner pages */
.page .mast { min-height: 28vh; }
.page .word { font-size: clamp(3.4rem, 14vw, 9.5rem); }
.sheet {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin-top: 1rem;
}
.sheet .body {
  grid-column: 2 / 9;
  transform: rotate(-1.1deg);
  font-size: 1.28rem;
  max-width: 42ch;
}
.sheet .body p { margin: 0 0 1.1rem; }
.sheet .aside {
  grid-column: 9 / 13;
  transform: rotate(3.4deg);
  margin-top: 2.8rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--brass-dim);
  text-transform: uppercase;
}
.sheet ul { margin: 0; padding: 0; list-style: none; }
.sheet li { margin: 0.4rem 0; border-top: 1px solid var(--rule); padding-top: 0.4rem; }
.sheet .unsur-field {
  grid-column: 2 / 9;
  grid-row: 2;
  position: relative;
  min-height: 4.6rem;
  margin: 0.2rem 0 1.4rem;
  transform: rotate(-1.4deg);
}
s {
  text-decoration: line-through;
  text-decoration-color: var(--ox-hot);
  text-decoration-thickness: 2px;
  color: var(--ivory-dim);
}

.back {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}

/* wax seal — joke, not a security claim */
.seal {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 20;
  width: 118px;
  text-align: center;
  transform: rotate(8deg);
  animation: seal-wobble 11s ease-in-out infinite;
}
@keyframes seal-wobble {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50% { transform: rotate(11deg) translateY(-4px); }
}
.wax {
  width: 108px;
  height: 108px;
  margin: 0 auto;
  position: relative;
  display: grid;
  place-items: center;
  color: #f0d9a8;
  background:
    radial-gradient(circle at 38% 32%, #c94a52 0%, #7a1e27 42%, #4a1016 78%, #2a080c 100%);
  border-radius: 50%;
  box-shadow:
    0 10px 18px rgba(0,0,0,0.5),
    inset 0 -8px 16px rgba(0,0,0,0.35),
    inset 0 6px 10px rgba(255,180,160,0.18);
}
.wax::before {
  content: "";
  position: absolute;
  inset: -8px;
  background:
    repeating-conic-gradient(
      from 6deg,
      #7a1e27 0deg 9deg,
      transparent 9deg 15deg
    );
  border-radius: 50%;
  z-index: -1;
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%);
          mask: radial-gradient(circle, transparent 58%, #000 59%);
  opacity: 0.95;
}
.wax .core {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.85rem;
  letter-spacing: 0.12em;
  line-height: 1;
}
.wax .rim {
  position: absolute;
  width: 100%;
  bottom: 18%;
  font-family: var(--sans);
  font-size: 0.42rem;
  letter-spacing: 0.18em;
  opacity: 0.75;
}
.joke {
  margin: 0.45rem 0 0;
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dim);
  max-width: 14ch;
  margin-left: auto;
  margin-right: auto;
}

.colophon {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 0 0 6.5rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.colophon p { grid-column: 1 / 8; margin: 0; transform: rotate(-1.5deg); }
.colophon .off { grid-column: 8 / 13; text-align: right; transform: rotate(2.8deg); }

.glitch {
  animation: glitch 0.28s steps(2, end);
}
@keyframes glitch {
  0% { transform: translate(0) skew(0); }
  20% { transform: translate(-3px, 1px) skew(-1deg); }
  40% { transform: translate(3px, -1px) skew(1.4deg); }
  60% { transform: translate(-1px, 0) skew(0); }
  100% { transform: translate(0); }
}

@media (max-width: 820px) {
  .wrap { width: calc(100% - 1.2rem); }
  .mast { min-height: 32vh; }
  .kicker { grid-column: 1 / -1; }
  .collide {
    grid-column: 4 / -1;
    transform: rotate(3deg) translateY(55%);
    font-size: 1rem;
  }
  .street-scene {
    width: calc(100% - 1.15rem);
    padding-top: 1.05rem;
    grid-template-columns: 1fr;
    grid-template-areas:
      "facade"
      "agac"
      "pave";
    row-gap: 0.7rem;
  }
  .lamp { display: none; }
  .facade { transform: rotate(-0.15deg); }
  .agac {
    margin: 0 4% 0 8%;
    transform: rotate(-0.8deg);
  }
  .quoin { display: none; }
  .storey,
  .storey-ground {
    grid-template-columns: 1fr;
    gap: 0.42rem;
    padding: 0.55rem 1.35rem 0.45rem;
  }
  .blind { display: none; }
  .win {
    min-height: 8.6rem;
    margin: 0;
  }
  .w00 { transform: rotate(-0.6deg); }
  .w04 { transform: rotate(0.5deg); }
  .w06 { transform: rotate(-0.4deg); }
  .w02 { transform: rotate(0.7deg); }
  .w01 { transform: rotate(-0.5deg); }
  .w03 { transform: rotate(0.9deg); }
  .portal { min-height: 12.8rem; transform: rotate(-0.2deg); }
  .cephe .word { font-size: clamp(2.35rem, 16vw, 3.45rem); }
  .pavement .cobble { height: 44px; }
  .cornice { padding-left: 0.7rem; padding-right: 0.7rem; }
  .k-acik, .k-gurultu, .k-kilit { grid-column: 1 / -1; margin: 0.8rem 0 0.2rem; transform: none; }
  .d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8, .d9 {
    grid-column: 1 / -1;
    margin: 0.45rem 0;
    margin-left: 0;
  }
  .d1 { transform: rotate(-1.8deg); }
  .d2 { transform: rotate(2.1deg); margin-left: 7%; width: 93%; }
  .d3 { transform: rotate(-1.1deg); }
  .d4 { transform: rotate(2.6deg); margin-left: 5%; width: 95%; }
  .d5 { transform: rotate(-2.4deg); }
  .d6 { transform: rotate(-3.2deg) skewX(-1deg); margin-left: 8%; width: 92%; }
  .d7 { transform: rotate(1.8deg); }
  .d8 { transform: rotate(2.2deg); margin-left: 6%; width: 94%; }
  .d9 { transform: rotate(-2.8deg) skewX(-1deg); margin-left: 9%; width: 91%; }
  .sheet .body, .sheet .aside { grid-column: 1 / -1; transform: none; }
  .sheet .aside { margin-top: 1.4rem; }
  .sheet .unsur-field { grid-column: 1 / -1; }
  .seal { right: 0.5rem; bottom: 0.5rem; transform: scale(0.86) rotate(8deg); }
  .colophon { padding-bottom: 7.5rem; }
  .colophon p, .colophon .off { grid-column: 1 / -1; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .seal, .win.glitched { animation: none; }
  .room, .door, .win, .portal, .agac .limb { transition: none; }
}

/* unsurlar — oda içi nesne; cephe .facade/.agac/.street-scene dokunulmaz */
.unsur {
  position: absolute;
  pointer-events: none;
}
.scrap {
  display: inline-block;
  margin: 0.6rem 0 0.2rem 8%;
  padding: 0.38rem 0.6rem 0.42rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  background: rgba(38, 28, 20, 0.92);
  border: 1px solid var(--rule);
  transform: rotate(-3.2deg);
  clip-path: polygon(2% 8%, 97% 0, 100% 86%, 7% 100%, 0 22%);
}
.plates {
  right: 0.4rem;
  bottom: 0.55rem;
  width: 2.15rem;
  height: 1.9rem;
}
.plates i {
  position: absolute;
  left: 0;
  right: 0;
  height: 0.38rem;
  background: linear-gradient(90deg, var(--brass-dim), var(--brass));
  border: 1px solid rgba(234, 220, 198, 0.28);
  border-radius: 40% 40% 18% 18%;
}
.plates i:nth-child(1) { bottom: 0; transform: rotate(-7deg); }
.plates i:nth-child(2) { bottom: 0.34rem; transform: rotate(5deg); opacity: 0.85; }
.plates i:nth-child(3) { bottom: 0.68rem; transform: rotate(-3deg); opacity: 0.68; }
.empty-wax {
  right: 0.35rem;
  bottom: 0.5rem;
  width: 2.5rem;
  height: 2.05rem;
  background:
    radial-gradient(circle at 42% 38%, rgba(122, 30, 39, 0.14) 0 28%, rgba(74, 16, 22, 0.08) 52%, transparent 74%);
  border-radius: 58% 42% 62% 38%;
  box-shadow: inset 0 0 0 1px rgba(122, 30, 39, 0.42);
}
.drawer {
  left: 0.2rem;
  bottom: 0.4rem;
  width: 3.6rem;
  height: 1.35rem;
  background: linear-gradient(180deg, #3a2a1c, #1a120c);
  border: 1px solid var(--brass-dim);
  box-shadow: inset 0 -6px 8px rgba(0,0,0,0.35);
}
.drawer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid var(--brass);
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.footprint {
  right: 0.55rem;
  bottom: 0.7rem;
  width: 16px;
  height: 26px;
  background: rgba(18, 12, 9, 0.72);
  border-radius: 42% 42% 36% 36%;
  transform: rotate(-18deg);
  opacity: 0.72;
}
.footprint::before {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 2px;
  width: 12px;
  height: 9px;
  background: rgba(18, 12, 9, 0.68);
  border-radius: 50%;
}
.bucket {
  right: 0.45rem;
  bottom: 0.5rem;
  width: 2rem;
  height: 1.55rem;
  border: 2px solid var(--brass-dim);
  border-top: 0;
  border-radius: 0 0 42% 42%;
}
.bucket i {
  position: absolute;
  bottom: 3px;
  width: 2px;
  height: 1.25rem;
  background: var(--ivory-dim);
  transform-origin: bottom;
}
.bucket i:nth-child(1) { left: 5px; transform: rotate(-14deg); }
.bucket i:nth-child(2) { left: 10px; transform: rotate(3deg); }
.bucket i:nth-child(3) { left: 15px; transform: rotate(16deg); }
.hinge {
  left: 0.15rem;
  top: 28%;
  width: 11px;
  height: 38px;
  background: linear-gradient(90deg, var(--brass-dim), var(--brass) 40%, #5a4a28);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
}
.hinge::before,
.hinge::after {
  content: "";
  position: absolute;
  left: -2px;
  width: 15px;
  height: 7px;
  background: var(--brass);
  border-radius: 2px;
}
.hinge::before { top: 4px; }
.hinge::after { bottom: 4px; }
.soot {
  right: -6%;
  bottom: 8%;
  width: 4.2rem;
  height: 2.8rem;
  background: radial-gradient(circle at 40% 40%, rgba(8, 6, 5, 0.78), transparent 70%);
  filter: blur(2px);
  mix-blend-mode: multiply;
}
.key-miss {
  position: absolute;
  right: 8%;
  top: 58%;
  width: 42px;
  height: 12px;
  background: var(--brass);
  border-radius: 8px 2px 2px 8px;
  transform: rotate(21deg);
  filter: drop-shadow(1px 2px 0 #1a1008);
  opacity: 0.78;
  z-index: 8;
}
.key-miss::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 7px;
  height: 7px;
  border: 2px solid #1a1008;
  border-radius: 50%;
}
.key-miss::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 2px;
  width: 11px;
  height: 8px;
  background:
    linear-gradient(90deg, var(--brass) 0 3px, transparent 3px 6px, var(--brass) 6px 9px);
}
.datestamp {
  right: 0.3rem;
  bottom: 0.55rem;
  left: auto;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  color: var(--ox-hot);
  border: 2px solid var(--ox);
  padding: 0.22rem 0.32rem;
  transform: rotate(-8deg);
  opacity: 0.84;
  display: inline-block;
  pointer-events: none;
}
.ink-dry {
  left: 1.2rem;
  bottom: 0.2rem;
  width: 3.1rem;
  height: 2.2rem;
  background:
    radial-gradient(circle at 50% 50%, rgba(20, 12, 10, 0.88) 0 28%, rgba(20, 12, 10, 0.38) 46%, transparent 70%),
    radial-gradient(circle at 64% 38%, rgba(20, 12, 10, 0.5), transparent 42%);
  transform: rotate(-12deg);
}
.hall-hinge { left: -0.2rem; top: 12%; z-index: 8; }
.hall-soot { right: 4%; top: 36%; z-index: 1; }
.unsur-field .empty-wax { left: 0; right: auto; bottom: 0.2rem; }
.unsur-field .drawer { left: 3.4rem; bottom: 0.35rem; }
.unsur-field .footprint { left: 0.4rem; right: auto; bottom: 0.4rem; }
.unsur-field .bucket { left: 0.2rem; right: auto; bottom: 0.2rem; }
.unsur-field .datestamp { left: 0; right: auto; bottom: 0.6rem; position: absolute; }
.unsur-field .ink-dry { left: 6.4rem; }

/* small marks in existing facade windows — do not replace street layout */
.facade .win .unsur,
.facade .portal .unsur {
  z-index: 2;
  opacity: 0.62;
}
.facade .win .plates,
.facade .win .empty-wax,
.facade .win .footprint,
.facade .win .bucket,
.facade .win .datestamp,
.facade .win .press-scrap {
  right: 0.42rem;
  top: 0.42rem;
  bottom: auto;
  left: auto;
  margin: 0;
}
.facade .win .press-scrap {
  position: absolute;
  max-width: 8ch;
  font-size: 0.46rem;
  padding: 0.18rem 0.28rem;
}
.facade .portal .hinge { left: 0.2rem; top: 22%; }

.win .scrap,
.win .press-scrap,
.room .scrap,
.room .press-scrap {
  position: absolute;
  right: 0.35rem;
  bottom: 0.45rem;
  left: auto;
  margin: 0;
  max-width: 11ch;
  font-size: 0.5rem;
  z-index: 3;
}
.facade .portal .key-miss {
  right: 1.55rem;
  top: 62%;
  width: 28px;
  height: 9px;
  z-index: 6;
}
.facade .portal .soot {
  right: 6%;
  bottom: 10%;
  width: 3.2rem;
  height: 2.1rem;
}