@font-face{font-family:BackDisplay;src:url('assets/room-display.ttf') format('truetype');font-weight:200 800;font-display:swap}
@font-face{font-family:BackHand;src:url('assets/room-hand.ttf') format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:BackBody;src:url('assets/room-type.ttf') format('truetype');font-weight:100 900;font-display:swap}
.backroom-door{display:grid;grid-template-columns:.88fr 1.12fr;gap:4%;align-items:center;background:linear-gradient(90deg,#23110fd1,#23110f20),url('assets/room-environment.webp') 50% 46%/cover;padding:30px 36px;margin:0 0 18px;color:#f3e8d6;box-shadow:0 15px 30px #080c0850;overflow:hidden}
.backroom-door-copy{padding:8px 0}.backroom-door h2{font:750 clamp(36px,3.8vw,57px)/1.03 BackDisplay,Arial,sans-serif;letter-spacing:-.025em;text-wrap:balance}.backroom-door h2 em{display:inline-block;font:650 1.12em/1.05 BackHand,cursive;letter-spacing:-.02em;color:#f1b477;transform:rotate(-3deg);margin-top:3px;white-space:nowrap}.backroom-door-copy>p{font:17px/1.5 BackBody,Arial,sans-serif;color:#efdbc5;max-width:31ch;margin:23px 0 25px;text-wrap:pretty}.backroom-entry{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;padding:14px 20px;background:#eadcc2;color:#3b221c;min-height:54px;font:15px/1.25 BackBody,Arial,sans-serif;box-shadow:0 7px 15px #160d0c50}.backroom-entry strong{font-weight:600}.backroom-entry:hover{background:#fff0d4;color:#291812}.backroom-entry svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}.backroom-door-note{display:block;font:13px/1.4 BackBody,Arial,sans-serif;margin-top:16px;color:#e4c5a7}.backroom-door-photo{margin:0;transform:rotate(1deg);background:#eadcc2;box-shadow:5px 14px 24px #11090870;min-width:0;padding:5px 5px 0}.backroom-door-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}.backroom-door-photo figcaption{padding:10px 7px 12px;color:#452c22;text-align:center}.backroom-door-photo figcaption>div{display:grid;grid-template-columns:1fr 1fr;font:600 22px/1.15 BackHand,cursive;margin-bottom:8px}.backroom-door-photo small{display:block;font:12px/1.35 BackBody,Arial,sans-serif;color:#6c503d}.backroom-nav{color:#e3bd85!important}
@media(max-width:1100px){.backroom-door{padding:27px;gap:4%;grid-template-columns:.95fr 1.05fr}.backroom-door h2{font-size:39px}.backroom-door-copy>p{font-size:16px;margin-block:20px}.backroom-entry{padding:14px 16px;font-size:14px;gap:17px}.backroom-door-note{font-size:12px}.backroom-door-photo figcaption>div{font-size:21px}}
@media(max-width:700px){.backroom-door{grid-template-columns:1fr;gap:25px;padding:26px 23px 24px;margin:0 0 12px;background-position:55% top;background-size:auto 100%}.backroom-door-copy{padding:0}.backroom-door h2{font-size:38px}.backroom-door h2 em{font-size:1.15em;white-space:normal}.backroom-door-copy>p{font-size:16px;line-height:1.5;max-width:29ch;margin:18px 0 21px}.backroom-entry{font-size:15px;min-height:52px;padding:14px 18px;gap:23px}.backroom-door-note{margin-top:13px;font-size:12px}.backroom-door-photo{transform:rotate(.7deg)}.backroom-door-photo figcaption>div{font-size:21px}.backroom-door-photo small{font-size:12px}.site-header nav a.backroom-nav{min-height:44px}}
@media(max-width:360px){.backroom-door{padding-inline:19px}.backroom-door h2{font-size:34px}.backroom-entry{font-size:14px;gap:15px;padding-inline:15px}.backroom-door-photo figcaption>div{font-size:19px}}
@media(prefers-reduced-motion:reduce){.backroom-entry{transition:none}}

/* Keep the doorway prominent while bringing the collection into view. */
.backroom-door{padding-block:26px}.backroom-door-photo{max-width:560px;width:100%;justify-self:end}.backroom-door-copy>p{max-width:40ch;margin:21px 0 25px}.backroom-door-copy>p span{display:block}.backroom-door h2{font-size:clamp(36px,3.55vw,53px)}
@media(max-width:700px){.backroom-door{padding-top:25px;padding-bottom:23px;gap:23px}.backroom-door-photo{max-width:none}.backroom-door h2{font-size:37px}.backroom-door-copy>p{margin-top:18px;margin-bottom:20px;font-size:16px;max-width:30ch}.backroom-door-copy>p span{display:inline}.backroom-door-copy>p span+span::before{content:' '}}
@media(max-width:360px){.backroom-door h2{font-size:34px}}
