/* Cream spiral-bound role cards and carved architectural doors. */
.spatial-study .calendar-paper {
  background: linear-gradient(#faf8f2, #f0eadf);
  color: #141414;
}

.spatial-study .calendar-paper.beneath {
  background: linear-gradient(#faf8f2, #eee8dc);
}

.spatial-study .calendar-paper.back {
  background: linear-gradient(0deg, #e7dfd0, #d8d0c2);
}

.spatial-study .calendar-word {
  color: #141414;
  text-shadow: none;
}

.spatial-study .calendar-paper small {
  color: #141414;
}

/* Concentric moulding follows the arch around the moving leaf. */
.spatial-study .door-frame {
  background:
    linear-gradient(90deg, #00000017, #ffffff80 2cqi, transparent 5cqi, transparent calc(100% - 5cqi), #00000015 calc(100% - 2cqi), #ffffff66),
    linear-gradient(#ffffff8c, transparent 30%),
    var(--casing);
  box-shadow:
    inset 0 0 0 .8cqi #ffffffb3,
    inset 0 0 0 1.4cqi #0000001f,
    inset 0 0 0 3.2cqi #ffffff70,
    inset 0 0 0 3.8cqi #0000001f,
    1.2cqi 1.7cqi 2.5cqi #14141424;
}

.spatial-study .door-keystone {
  position: absolute;
  z-index: 2;
  left: 43cqi;
  top: -4.5cqi;
  width: 14cqi;
  height: 19cqi;
  background: linear-gradient(100deg, #b9b8b2, #f9f7ef 15%, #e8e5dc 75%, #b4b3ad);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  box-shadow: inset 0 .6cqi 0 #fff, inset 0 -1cqi 1cqi #00000024;
}

.spatial-study .door-opening {
  perspective: 360cqi;
  perspective-origin: 50% 54%;
  clip-path: inset(0 round 42.5cqi 42.5cqi 0 0);
}

.spatial-study .door-room {
  overflow: hidden;
  background: linear-gradient(180deg, #0004, transparent 40%, #0002), var(--room);
  box-shadow: inset 2cqi 1.5cqi 5cqi #0005;
}

.spatial-study .door-unit::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50cqi 50cqi 0 0;
  box-shadow:
    0 0 1rem color-mix(in srgb, var(--brand-orange) 28%, transparent),
    0 0 .24rem color-mix(in srgb, var(--brand-orange) 24%, transparent);
  opacity: var(--door-halo, 0);
  pointer-events: none;
}

.spatial-study .door-unit.is-opening::before {
  transition: opacity .32s ease-out;
}

.spatial-study .door-leaf {
  --upper-panel-top: 7cqi;
  --upper-panel-bottom: 68cqi;
  background:
    linear-gradient(100deg, #ffffff14, transparent 34%, #00000026),
    repeating-linear-gradient(92deg, transparent 0 1.2cqi, #ffffff04 1.3cqi 1.5cqi, transparent 1.7cqi 3.4cqi),
    var(--door);
}

.spatial-study .door-reeds {
  left: 6.5cqi;
  right: 6.5cqi;
  top: var(--upper-panel-top);
  bottom: var(--upper-panel-bottom);
  border-radius: 36cqi 36cqi 1.2cqi 1.2cqi;
  background: linear-gradient(105deg, #00000014, #ffffff04 30%, #0000000a 70%, #0000001a);
  box-shadow:
    inset 0 0 0 .45cqi #0000003d,
    inset .9cqi 1cqi 1.5cqi #00000047,
    inset -.5cqi -.5cqi .8cqi #ffffff33;
}

.spatial-study .door-lower-panel {
  position: absolute;
  left: 6.5cqi;
  right: 6.5cqi;
  bottom: 7cqi;
  height: 49cqi;
  border-radius: 1cqi;
  background: linear-gradient(105deg, #00000012, #ffffff05 35%, #00000015);
  box-shadow:
    inset 0 0 0 .45cqi #0000003d,
    inset .8cqi .8cqi 1.3cqi #00000047,
    inset -.5cqi -.5cqi .8cqi #ffffff33;
}

.spatial-study .door-relief {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spatial-study .carving-shadow {
  stroke: #141414;
  stroke-width: 1.3;
  opacity: .64;
}

.spatial-study .carving-rim {
  stroke: #faf8f2;
  stroke-width: .75;
  opacity: .4;
  transform: translate(-.35px, -.5px);
}

.spatial-study .door-plate {
  /* The rosettes are centered at y=55 and y=159 in a 200-unit panel. */
  top: calc(var(--upper-panel-top) + (100% - var(--upper-panel-top) - var(--upper-panel-bottom)) * .535);
  width: 49cqi;
  min-height: 17.6cqi;
  padding-inline: 3cqi;
  font-size: 5.15cqi;
  letter-spacing: .025em;
}

.door-status {
  position: absolute;
  top: calc(100% + .3rem);
  left: 50%;
  translate: -50% 0;
  padding: .26rem .48rem;
  border: 1px solid #faf8f25c;
  border-radius: .3rem;
  background: var(--brand-black);
  color: var(--brand-cream);
  font-size: clamp(.625rem, 3.75cqi, .75rem);
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
  white-space: nowrap;
}

.contact-address {
  margin-top: .9rem;
  overflow-wrap: anywhere;
}

.spatial-study .door-handle {
  top: 62%;
}

.spatial-study .doors.is-focused .door-unit.is-active .door-handle > i {
  transform: rotate(-32deg);
}

.spatial-study .door-engraving {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2cqi;
  color: #14141499;
  font: 500 3.2cqi/1 var(--body);
  letter-spacing: .14em;
  text-align: center;
  text-shadow: 0 .1cqi #ffffff40;
}

/* Chronological ribbons move over a neutral surface. */
.spatial-study .story,
html[data-theme=dark] .spatial-study .story {
  background: var(--paper);
  box-shadow: inset 0 1px 0 var(--line);
}

.spatial-study .story.is-current .story-traveller {
  background: var(--ink);
  box-shadow: 0 0 0 .4rem color-mix(in srgb, var(--ink) 8%, transparent);
}

html[data-theme=dark] .spatial-study .door-frame {
  background:
    linear-gradient(90deg, #00000066, #ffffff14 2cqi, transparent 5cqi, transparent calc(100% - 5cqi), #00000080 calc(100% - 2cqi), #ffffff0d),
    var(--casing);
  box-shadow: inset 0 0 0 .8cqi #ffffff26, inset 0 0 0 1.4cqi #0006, inset 0 0 0 3.2cqi #ffffff0d, inset 0 0 0 3.8cqi #0008, 1.2cqi 1.7cqi 2.5cqi #0006;
}

html[data-theme=dark] .spatial-study .door-keystone {
  background: linear-gradient(100deg, #161616, #444 15%, #333 75%, #171717);
  box-shadow: inset 0 .6cqi 0 #ffffff1f, inset 0 -1cqi 1cqi #0006;
}

html[data-theme=dark] .spatial-study .door-leaf {
  background: linear-gradient(100deg, #ffffff0d, transparent 34%, #0005), var(--door-dark);
}

html[data-theme=dark] .spatial-study .door-engraving {
  color: #faf8f299;
  text-shadow: 0 .1cqi #0005;
}

.room-page.coming-soon-room .room-main {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding-block: clamp(5rem, 12svh, 8rem);
}

.coming-soon-room .room-intro {
  margin: 0;
  text-align: center;
}

.coming-soon-room .room-intro h1 {
  margin-bottom: .875rem;
}

.coming-soon-room .room-intro > p {
  margin-inline: auto;
  color: var(--accent-text);
  font-weight: 650;
}

@media(forced-colors:active) {
  .spatial-study .calendar-paper {
    background: Canvas;
  }
  .spatial-study .calendar-word,
  .spatial-study .calendar-paper small {
    color: CanvasText;
    text-shadow: none;
  }
  .spatial-study .door-keystone {
    background: Canvas;
    border: 1px solid CanvasText;
  }
  .spatial-study .door-relief {
    display: none;
  }
  .spatial-study .door-unit::before {
    display: none;
  }
}