@font-face{font-family:Fraunces;src:url(fonts/fraunces.woff2) format("woff2");font-weight:500 700;font-display:swap}@font-face{font-family:Barlow Semi Condensed;src:url(fonts/barlow-sc-400.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Barlow Semi Condensed;src:url(fonts/barlow-sc-600.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:Barlow Semi Condensed;src:url(fonts/barlow-sc-700.woff2) format("woff2");font-weight:700;font-display:swap}:root{--paper: #c3ae8d;--ink: #33241a;--ink-2: #443222;--gold-ink: #553810;--gold-line: #c3a066;--ivory: rgba(252, 246, 234, .95);--dark: #2e2418;--on-dark: #fbf1e2;--on-dark-2: #e4d3bb;--z-menu: #d9a066;--z-pos: #d9a066;--z-motel: #d8b173;--z-admin: #c9d1dc;--onb: #8a5520;--onb-deep: #5e3814;--sj-cream: #f0e3d0;--sj-gold: #c9a36a;--sj-ink: #6a4a1e;--office: #2b221b;--font-display: "Fraunces", Georgia, serif;--font-ui: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;--ease: cubic-bezier(.2, .7, .2, 1);--on-bg: var(--ink);--on-bg-2: var(--ink-2);--on-bg-gold: var(--gold-ink);--focus: var(--ink)}*,*:before,*:after{box-sizing:border-box}html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%}body{margin:0;min-height:100svh;font-family:var(--font-ui);font-size:1.0625rem;line-height:1.5;overflow-x:hidden}a{color:inherit}.nowrap{white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.scene{position:relative;isolation:isolate;overflow:hidden;width:100vw;height:100vh;width:100dvw;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"intro" "slot" "doors" "credit";justify-items:center;padding:clamp(16px,4dvh,44px) clamp(16px,2.6vw,44px) clamp(14px,3dvh,32px)}@property --cloth{syntax: "<color>"; inherits: true; initial-value: #1d140f;}.scene{--cloth: #1d140f;--frame: clamp(8px, 1.1vw, 16px);--on-bg: #f6ead8;--on-bg-2: #e6d4ba;--on-bg-gold: #dcbb7e;--focus: #f6ead8;background:linear-gradient(180deg,rgb(24 14 8 / .72),rgb(24 14 8 / .34) 24%,transparent 40%,transparent 72%,rgb(18 11 7 / .6)),url(img/sunset-1840.webp) 50% 70% / cover no-repeat,#1d140f;transition:--cloth .7s var(--ease)}.scene:is([data-open=menu],[data-open=pos]){--cloth: #2f1905}.scene:is([data-open=motel],[data-open=admin]){--cloth: #2e1c10}:root:has(.scene){--paper: #120c09}.scene:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--cloth);opacity:0;transition:opacity .7s var(--ease)}.scene[data-open]:before{opacity:.5}.scene:after{content:"";position:absolute;inset:var(--frame);z-index:-1;pointer-events:none;border:1px solid rgba(226,196,154,.16)}.intro{grid-area:intro;position:relative;z-index:1;text-align:center}.kicker{margin:0 0 .3em;font-weight:700;font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;color:var(--on-bg-gold)}.intro h1{margin:0;font-family:var(--font-display);font-weight:650;font-variation-settings:"opsz" 144;font-size:clamp(2.4rem,min(3.7vw,8dvh),4.2rem);line-height:.95;letter-spacing:-.01em;color:var(--on-bg)}.slot{grid-area:slot;justify-self:stretch;position:relative;min-width:0;min-height:0;container-type:size;display:grid;place-items:center}.photo{position:relative;isolation:isolate;width:min(98cqw,226cqh);aspect-ratio:1600 / 694}.photo:before{content:"";position:absolute;left:-4%;right:-4%;top:88%;height:18%;z-index:-1;background:radial-gradient(closest-side,rgba(255,190,110,.2),transparent)}.photo img{position:absolute;inset:0;display:block;width:100%;height:100%}.photo__front{transition:filter .5s var(--ease)}#scene[data-open] .photo__front{filter:brightness(.5) saturate(.85)}.photo__glow{z-index:-1;pointer-events:none;filter:blur(clamp(26px,3.6vw,64px)) saturate(1.8) brightness(1.06);transform:scale(1.32,1.5);transform-origin:50% 60%;opacity:.9;-webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);transition:opacity .5s var(--ease)}#scene[data-open] .photo__glow{opacity:.35}.room{opacity:0;pointer-events:none;clip-path:inset(var(--y) calc(100% - var(--x) - var(--w)) calc(100% - var(--y) - var(--h)) var(--x));transition:opacity .55s var(--ease)}[data-open=menu] .room[data-zone=menu],[data-open=pos] .room[data-zone=pos],[data-open=motel] .room[data-zone=motel],[data-open=admin] .room[data-zone=admin]{opacity:1}.room--lens{clip-path:none;-webkit-mask-image:radial-gradient(circle var(--lr, 120px) at var(--lx, -999px) var(--ly, -999px),#000 70%,transparent 100%);mask-image:radial-gradient(circle var(--lr, 120px) at var(--lx, -999px) var(--ly, -999px),#000 70%,transparent 100%);transition-duration:.25s}.lens-ring{position:absolute;left:var(--lx, -999px);top:var(--ly, -999px);width:calc(var(--lr, 120px) * 1.7);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px dashed rgba(255,243,220,.7);opacity:0;pointer-events:none;transition:opacity .25s}.is-looking .room--lens,.is-looking .lens-ring{opacity:1}.frame{--z: var(--z-menu);position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border:2px solid var(--z);border-radius:4px;box-shadow:0 0 0 1px #0003,0 0 22px -4px var(--z);opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}.frame[data-zone=pos]{--z: var(--z-pos)}.frame[data-zone=motel]{--z: var(--z-motel)}.frame[data-zone=admin]{--z: var(--z-admin)}.frame__tag{position:absolute;left:-2px;bottom:calc(100% + 5px);padding:.15em .8em;border-radius:999px;white-space:nowrap;font-weight:700;font-size:clamp(10px,.78vw,12px);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark);background:var(--dark);box-shadow:inset 0 0 0 1.5px var(--z)}.frame__tag--right{left:auto;right:-2px}.frame__tag--below{bottom:auto;top:calc(100% + 5px)}[data-open=menu] .frame[data-zone=menu],[data-open=pos] .frame[data-zone=pos],[data-open=motel] .frame[data-zone=motel],[data-open=admin] .frame[data-zone=admin]{opacity:1}.spot{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);cursor:pointer}.spot:focus{outline:none}.doors{grid-area:doors;position:relative;z-index:2;width:min(100%,1200px);padding:clamp(8px,1.8dvh,18px) 0}.doors ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.4dvh,14px)}.doors .door{height:clamp(74px,11dvh,108px)}.door{--z: var(--z-menu);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:clamp(8px,.9vw,14px);height:100%;padding:6px 14px 6px 8px;border-radius:12px;text-decoration:none;color:var(--ink);background:var(--ivory);box-shadow:inset 0 0 0 1px var(--gold-line),inset 0 0 0 4px #fcf6eaf2,inset 0 0 0 5px #c3a06680,0 6px 14px -8px #3c281480;transition:background-color .25s ease,color .25s ease,transform .3s var(--ease),box-shadow .25s ease}.door[data-zone=pos]{--z: var(--z-pos)}.door[data-zone=motel]{--z: var(--z-motel)}.door[data-zone=admin]{--z: var(--z-admin)}.door__icon{display:grid;place-items:center;width:clamp(30px,min(2.6vw,4.4dvh),42px);aspect-ratio:1;border-radius:50%;background:var(--z);color:#fff8ec}.door__icon svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.door__name{display:block;font-weight:700;font-size:clamp(13px,1.08vw,17px);line-height:1.15;letter-spacing:.07em;text-transform:uppercase}.door__desc{display:block;font-size:clamp(12px,.86vw,14px);line-height:1.3;color:var(--ink-2);transition:color .25s}.doors .door{--pad: clamp(8px, 1.3dvh, 12px);position:relative;overflow:hidden;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(10px,1.1vw,16px);align-items:center;padding:var(--pad) clamp(28px,2.6vw,40px) var(--pad) var(--pad);border-radius:16px;box-shadow:0 1px 1px #28140a40,0 10px 22px -12px #28140a99;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}.door__window{position:relative;height:100%;aspect-ratio:2 / 3;overflow:hidden;border-radius:999px 999px 8px 8px;display:grid;place-items:center}.door__window img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}.door__window--keyhole{aspect-ratio:300 / 514;border-radius:0}.door__window--keyhole img{object-fit:contain;transform-origin:50% 40%}.door__brand{display:block;font-weight:700;font-size:clamp(10px,.72vw,12px);letter-spacing:.22em;text-transform:uppercase}.doors .door__name{font-size:clamp(15px,1.25vw,20px);letter-spacing:.06em;margin-top:.1em}.doors .door__desc{margin-top:.2em}.door__go{position:absolute;right:clamp(8px,.9vw,14px);bottom:clamp(8px,1.2dvh,14px);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;opacity:.55;transition:opacity .3s,transform .35s var(--ease)}.door__go svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.door--cafe{background:linear-gradient(155deg,var(--onb),var(--onb-deep));color:#fff6ef}.door--cafe .door__brand{color:#f7dcb4}.door--cafe .door__desc{color:#f6e8d6}.door--cafe .door__window{box-shadow:0 0 0 2px #ffeee1e6}.door--saint-joseph{background:var(--sj-cream);color:var(--ink);box-shadow:inset 0 0 0 1px var(--sj-gold),0 1px 1px #28140a33,0 10px 22px -12px #28140a80}.door--saint-joseph .door__brand{color:var(--sj-ink)}.door--saint-joseph .door__desc{color:#4a3726}.door--office{background:linear-gradient(155deg,#3a2e24,var(--office));color:#fbf1e2}.doors .door--office:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #dcbb7e73}.door--office .door__brand{color:#d9b77a}.door--office .door__desc{color:#e4d3bb}.door--office .door__window{box-shadow:inset 0 0 0 1.5px #c9a36a}.door--office .door__window svg{position:absolute;inset:0;margin:auto;width:46%;height:auto;fill:none;stroke:#d9b77a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}.doors .door:hover,.doors .door:focus-visible,.doors .door.is-open{transform:translateY(-4px);box-shadow:0 2px 2px #28140a33,0 18px 30px -14px #28140ab3}.door--saint-joseph:hover,.door--saint-joseph:focus-visible,.door--saint-joseph.is-open{box-shadow:inset 0 0 0 1px var(--sj-gold),0 2px 2px #28140a33,0 18px 30px -14px #28140a99}.doors .door:hover .door__window img,.doors .door:focus-visible .door__window img,.doors .door.is-open .door__window img{transform:scale(1.08)}.doors .door--saint-joseph:hover .door__window img,.doors .door--saint-joseph:focus-visible .door__window img,.doors .door--saint-joseph.is-open .door__window img{transform:scale(1.16)}.doors .door:hover .door__window svg,.doors .door:focus-visible .door__window svg,.doors .door.is-open .door__window svg{transform:scale(1.12)}.doors .door:hover .door__go,.doors .door:focus-visible .door__go,.doors .door.is-open .door__go{opacity:1;transform:translate(3px)}.doors .door--cafe:hover,.doors .door--cafe:focus-visible,.doors .door--cafe.is-open{background:linear-gradient(155deg,var(--onb),var(--onb-deep));color:#fff6ef}.doors .door--saint-joseph:hover,.doors .door--saint-joseph:focus-visible,.doors .door--saint-joseph.is-open{background:var(--sj-cream);color:var(--ink)}.doors .door--office:hover,.doors .door--office:focus-visible,.doors .door--office.is-open{background:linear-gradient(155deg,#3a2e24,var(--office));color:#fbf1e2}.doors .door--cafe:hover .door__desc,.doors .door--cafe:focus-visible .door__desc,.doors .door--cafe.is-open .door__desc{color:#f6e8d6}.doors .door--saint-joseph:hover .door__desc,.doors .door--saint-joseph:focus-visible .door__desc,.doors .door--saint-joseph.is-open .door__desc{color:#4a3726}.doors .door--office:hover .door__desc,.doors .door--office:focus-visible .door__desc,.doors .door--office.is-open .door__desc{color:#e4d3bb}.doors .door:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.is-touring .doors .door.is-open:not(:hover):not(:focus-visible){transform:none;outline:2px solid var(--z);outline-offset:3px}.is-touring .doors .door.is-open:not(:hover):not(:focus-visible) .door__window img,.is-touring .doors .door.is-open:not(:hover):not(:focus-visible) .door__window svg{transform:none}.door:hover,.door:focus-visible{background:var(--dark);color:var(--on-dark);transform:translateY(-2px)}.door:hover .door__desc,.door:focus-visible .door__desc{color:var(--on-dark-2)}.credit{grid-area:credit;justify-self:center;position:relative;z-index:1}.credit a{display:inline-flex;gap:.35em;padding:.3em 1em;border-radius:999px;font-size:.8rem;text-decoration:none;color:var(--ink-2);background:var(--ivory);box-shadow:inset 0 0 0 1px var(--gold-line)}.credit strong{color:var(--ink)}.credit a:hover strong{text-decoration:underline;text-underline-offset:3px}.subpage{position:relative;min-height:100svh;display:grid;place-items:center;align-content:center;gap:clamp(20px,3.5vh,32px);padding:clamp(32px,7vh,72px) 20px 72px;text-align:center}.subpage .kicker{margin:0;font-size:.8rem}.subpage h1{margin:0;font-family:var(--font-display);font-weight:650;font-variation-settings:"opsz" 144;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1;color:var(--ink)}.subpage .note{margin:0 auto;max-width:30em;font-size:1.15rem;color:var(--ink-2)}.subpage .door{width:min(100%,340px);height:auto;min-height:64px;padding:10px 16px 10px 10px;border-radius:12px;column-gap:12px;text-align:left}.subpage .door__icon{width:42px}.subpage .door__name{font-size:1.1rem}.subpage .door__desc{font-size:.9rem}@media(min-width:760px)and (aspect-ratio>5/4){.intro{max-width:44rem}.photo{position:absolute;bottom:0;left:50%;width:min(96cqw,226cqh);translate:-50% 0}}@media(max-aspect-ratio:5/4)and (min-width:760px){.intro{max-width:40rem}.doors{width:min(100%,880px);padding:clamp(8px,1.6dvh,16px) 0}.doors ul{grid-template-columns:repeat(2,minmax(0,1fr))}.doors .door{height:clamp(84px,9.5dvh,112px)}.scene{--sky: calc(39dvh + 48vw) ;background:linear-gradient(180deg,rgb(24 14 8 / .72),rgb(24 14 8 / .34) 16%,transparent 28%),linear-gradient(180deg,transparent calc(var(--sky) - 110px),#17100b var(--sky)),url(img/sunset-1840.webp) 56% 0 / auto var(--sky) no-repeat,#17100b}}@media(max-width:759px){.scene{width:auto;height:auto;min-height:100vh;min-height:100dvh;padding:22px 14px 24px;grid-template-rows:auto auto auto auto}.scene{--sky: calc(208px + 64vw) ;background:linear-gradient(180deg,rgb(24 14 8 / .72),rgb(24 14 8 / .3) 190px,transparent 280px),linear-gradient(180deg,transparent calc(var(--sky) - 90px),#17100b var(--sky)),url(img/sunset-1840.webp) 56% 0 / auto var(--sky) no-repeat,#17100b}.intro h1{font-size:clamp(2.6rem,13vw,3.6rem)}.slot{container-type:normal;margin-top:8px}.photo{width:calc(100% + 28px);margin:0 -14px 14px}.frame__tag{font-size:9px;padding:1px 6px;bottom:calc(100% + 3px)}.frame__tag--below{bottom:auto;top:calc(100% + 3px)}.doors{width:100%;padding:0}.doors ul{grid-template-columns:minmax(0,1fr);gap:10px;height:auto}.doors .door{height:88px;padding:8px 40px 8px 8px}.doors .door:hover,.doors .door:focus-visible,.doors .door.is-open{transform:none}.door__brand{font-size:10px}.doors .door__name{font-size:1.1rem}.doors .door__desc{font-size:.88rem}.credit{margin-top:16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.001ms!important;transition-delay:0s!important}}@media(forced-colors:active){.door{border:2px solid ButtonText}}
