/* Job 73 / 73b, 4 Nov. The supplied drawing is the whole room. */
.bell-room-entrance .orb-rim{box-shadow:0 0 24px 10px #ffe5a999,0 0 65px #fff2c5!important}
.bell-room-entrance .orb-skin{opacity:.9}
.bell-room-active #harvey-host{display:none!important}
.bell-room-active #bar #return-today{visibility:hidden}
.bell-room-active #bar{pointer-events:none}
.bell-room-active #home{pointer-events:auto}
body:has(#bell-room:not([hidden])) #credits{visibility:hidden}
#bell-room{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1280px,calc(100vw - 60px),calc((100dvh - 128px)*1.768421));aspect-ratio:2688/1520;z-index:22;background:#f3ead8;border:1px solid #b7a78d;border-radius:6px 25px 8px 18px;box-shadow:0 22px 90px #40322240;isolation:isolate;color:#403326;overflow:hidden;font-family:Georgia,'Times New Roman',serif} /* Job 76, 4 Nov: every room page inherits paper typography. */
#bell-room [hidden]{display:none!important}
#bell-room button{font-family:Georgia,serif}
#bell-room .br-exit{position:absolute;right:18px;top:16px;z-index:10;min-height:44px;border:1px solid #a79980;border-radius:24px;background:#fff8e9;padding:10px 18px;font-size:15px}
.br-stage,.br-room-picture,.br-actors{position:absolute;inset:0;overflow:hidden}
.br-room-art{display:block;width:100%;height:100%;object-fit:fill}
.br-actors{z-index:2;pointer-events:none}
.br-george{position:absolute;bottom:-3%;left:86%;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(3px 4px 1px #44311f30)}
.br-harvey{position:absolute;z-index:3;left:55%;bottom:2%;width:auto;--br-harvey-height:16%;transform:translateX(-50%);filter:drop-shadow(2px 4px 1px #33271930)} /* Job 82, 4 Nov: a small seated dog on the rug. */
.br-george{transform-origin:50% 100%;transition:height .22s ease-in-out,transform .4s ease-in-out} /* Job 82, 4 Nov: keep sheet changes and pointing gentle. */
/* Job 76, 4 Nov. The same plank artwork opens over a recess before George emerges.
   Coordinates follow the two supplied drawings; no new room artwork. */
.br-doorway,.br-door-leaf{position:absolute;left:58.1%;top:36%;width:6.1%;height:25%;pointer-events:none}
.br-doorway{z-index:1;background:linear-gradient(100deg,#211a13,#463322);box-shadow:inset 3px 2px 8px #130d09}
.br-door-leaf{z-index:3;background-image:url('assets/bell_room/room_landscape.jpg');background-size:1639.344% 400%;background-position:61.874% 48%;transform-origin:left center;transform:perspective(500px) rotateY(calc(var(--br-door-open,0)*-76deg));box-shadow:2px 1px 2px #23160b80;backface-visibility:hidden}
.br-entrant{position:absolute;z-index:2;left:calc(61% + var(--br-step,0)*4%);bottom:calc(39% - var(--br-step,0)*7%);height:calc(22% * var(--br-entrance-scale,1) * (.88 + var(--br-step,0)*.12));width:auto;max-width:none;transform:translateX(-50%);clip-path:inset(0 0 calc((1 - var(--br-step,0))*18%) 0)}
.br-speech{position:absolute;top:10%;left:6%;width:42%;box-sizing:border-box;min-height:100px;z-index:7;background:#fffaf0;border:2px solid #625343;border-radius:13px 20px 15px 9px;padding:20px 24px;box-shadow:3px 4px 0 #af997945;text-align:left;font-size:clamp(20px,2.1vw,29px);line-height:1.25}
.br-speech:after{content:'';position:absolute;right:24px;bottom:-15px;width:24px;height:24px;background:#fffaf0;border-right:2px solid #625343;border-bottom:2px solid #625343;transform:skewY(-35deg) rotate(30deg)}
.br-speech:disabled{cursor:default;color:inherit}
.br-choices{position:absolute;left:57%;top:53%;width:20%;display:flex;justify-content:space-around;gap:16px;z-index:6}
.br-choice{position:relative!important;flex:none;transform:none!important;background:radial-gradient(circle at 34% 27%,#fffdf2 0,#f5e1aa 35%,#c1a570 72%,#796545 100%);box-shadow:inset 0 0 0 1px #fff3cc,0 5px 12px #2e201866} /* Job 76, 4 Nov: opaque body beneath the village's rim and shine. */
.br-choice .orb-skin{opacity:1!important}
.br-choice .orb-rim{opacity:1!important;box-shadow:0 0 9px #ffe1a5}
.br-choice-icon{position:absolute;inset:0;display:grid;place-items:center;font:36px Georgia;color:#3d3326;text-shadow:1px 2px #fff9;z-index:1}
.br-choice[data-kind=film] .br-choice-icon{inset:27%;border-radius:50%;background:#fff8e8;border:1px solid #685234;font-size:24px}
.br-choice .orb-face{visibility:hidden}
.br-choice-label{position:absolute;top:104%;left:50%;transform:translateX(-50%);font:16px Georgia;white-space:nowrap;color:#4b3c2a;background:#fff8e8;padding:4px 9px;border-radius:5px;border:1px solid #c7b696}
.br-pop{animation:br-pop .48s cubic-bezier(.2,.9,.4,1.4) both!important}
@keyframes br-pop{from{opacity:0;scale:.1}to{opacity:1;scale:1}}
.br-list{position:absolute;inset:80px 0 0;overflow:auto;padding:0 30px 35px;overscroll-behavior:contain}
.br-list-head{display:flex;align-items:center;justify-content:space-between;gap:15px;position:sticky;top:0;background:#f3ead8f8;padding:10px 0 15px;z-index:1;border-bottom:1px solid #c0ae90;margin-bottom:20px}
.br-list h1{font-size:34px;font-weight:normal;margin:0}
.br-list-back,.br-account-options button{min-height:44px;border:1px solid #b5a180;background:#fff8ea;padding:10px 15px;border-radius:8px}
.br-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.br-story{border:1px solid #c2af8e;background:#fff9ed;text-align:left;padding:0 0 16px;overflow:hidden;box-shadow:2px 3px #bba48233;border-radius:3px;display:flex;flex-direction:column}
.br-story img{width:100%;height:110px;object-fit:cover}
.br-story span{font:13px Georgia,'Times New Roman',serif;color:#74664e;padding:12px 14px 5px} /* Job 76, 4 Nov */
.br-story strong{font-size:19px;font-weight:normal;padding:0 14px;line-height:1.25}
.br-account-options{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.br-account{max-width:640px;font-size:22px;line-height:1.55}
#bell-room .source{font:14px/1.5 Georgia,'Times New Roman',serif!important} /* Job 76, 4 Nov: override the village's sans-serif source rule. */
@media(max-width:650px){
 #bell-room{inset:84px 10px max(12px,env(safe-area-inset-bottom));transform:none;width:auto;aspect-ratio:auto;border-radius:6px 18px 5px 10px}
 #bell-room .br-exit{top:10px;right:10px;font-size:13px;padding:8px 13px}
 .br-speech{top:64px;left:14px;width:calc(100% - 28px);min-height:88px;font-size:20px;padding:14px 17px}
 .br-speech:after{width:18px;height:18px;bottom:-12px}
 /* A measured clearance keeps even the raised arm below the speech text. */
 .br-actors{clip-path:inset(var(--br-speech-clear,220px) 0 0 0)}
 /* Job 76, 4 Nov. Bound height by the phone's width to preserve aspect ratio.
    Separate floor space: Harvey left, George right; choices above them. */
 .br-george{left:78%;--br-george-height:min(65%,calc((100vw - 22px)*.88))}
 .br-harvey{left:28%;bottom:2%;--br-harvey-height:min(14%,calc((100vw - 22px)*.23))} /* Job 82, 4 Nov */
 .br-choices{top:calc(var(--br-speech-clear,220px) + 14px);left:7%;width:47%;gap:14px;justify-content:space-evenly}
 .br-choice{width:68px!important;height:68px!important}
 .br-choice-icon{font-size:31px}
 .br-choice-label{font-size:14px}
 .br-doorway,.br-door-leaf{left:66.4%;top:44.6%;width:6.8%;height:16%}
 .br-door-leaf{background-image:url('assets/bell_room/room_portrait.jpg');background-size:1470.588% 625%;background-position:71.245% 53.095%}
 .br-entrant{left:calc(70% + var(--br-step,0)*5%);bottom:calc(39.4% - var(--br-step,0)*6%);height:calc(14% * var(--br-entrance-scale,1) * (.88 + var(--br-step,0)*.12))}
 .br-list{inset:64px 0 0;padding:0 18px 25px}
 .br-list h1{font-size:28px}
 .br-list-head{gap:10px}
 .br-list-back{font-size:13px;padding:8px 10px}
 .br-story-grid{grid-template-columns:1fr 1fr;gap:12px}
 .br-story img{height:90px}
 .br-story strong{font-size:17px;padding:0 10px}
 .br-story span{padding:9px 10px 5px}
 .br-account{font-size:20px}
 .br-account-options{gap:7px}
 .br-account-options button{padding:9px 11px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.br-pop,.bell-room-entrance *,.br-choice *{animation:none!important}}
/* Job 76b, 4 Nov. Picture bubbles belong to the room, with paper tags underneath.
   Their staggered centres are set by roomFilmLayout; no shelf or film page. */
.br-films{position:absolute;inset:0;z-index:6;pointer-events:auto;overflow-y:auto} /* Job 82, 4 Nov: additional films can continue below the four priority films. */
#bell-room .br-film-bubble{position:absolute;transform:translate(-50%,-50%)!important;pointer-events:auto} /* Job 82, 4 Nov: inherit the village's skin, rim, shine, body and hover. */
#bell-room .br-film-bubble .orb-face{display:none}
#bell-room .br-film-bubble.br-pop{animation:br-pop .4s ease-out both!important}
.br-film-label{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);box-sizing:border-box;width:148px;padding:5px 8px;border:1px solid #c7b696;border-radius:3px 6px 4px 5px;background:#fff8e8;color:#403326;box-shadow:1px 3px 4px #38281722;font:16px/1.2 Georgia,serif;text-align:center}
#bell-room .br-film-back{position:absolute;left:6%;top:16%;z-index:7;min-height:44px;padding:8px 13px;border:1px solid #b5a180;border-radius:8px;background:#fff8ea;color:#403326;font-size:15px}
#bell-room .br-film-bubble:focus-visible,#bell-room .br-film-back:focus-visible{outline:3px solid #5c4230;outline-offset:5px}
.br-account-picture{display:block;width:100%;max-height:240px;object-fit:contain;margin:0 0 20px}
@media(max-width:650px){
 #bell-room .br-film-back{top:64px;font-size:14px}
 .br-film-label{width:132px;font-size:14px;padding:5px 6px}
}
@media(prefers-reduced-motion:reduce){#bell-room .br-film-bubble.br-pop,#bell-room .br-film-bubble .orb-body{animation:none!important}}
/* Job 82, 4 Nov. Two village bubbles appear during George's explanation.
   Account cards keep their existing typography and picture. */
.br-histories{position:absolute;inset:0;z-index:6;pointer-events:none}
#bell-room .br-history-bubble{left:25%;top:55%;transform:translate(-50%,-50%);pointer-events:auto}
#bell-room .br-history-bubble[data-account=survey]{left:48%;top:55%}
.br-history-back,.br-history-more{position:absolute;left:6%;top:16%;z-index:7;min-height:44px;padding:8px 13px;border:1px solid #b5a180;border-radius:8px;background:#fff8ea;color:#403326;font-size:15px}
.br-history-more{left:28%}
.br-stage[data-history-pointing=older] .br-george{transform:translateX(-50%) rotate(-3deg)}
.br-stage[data-history-pointing=survey] .br-george{transform:translateX(-50%) rotate(1deg)}
.br-stage[data-history-pointing=older] [data-account=older],.br-stage[data-history-pointing=survey] [data-account=survey]{outline:2px solid #fffaf0;outline-offset:7px}
#bell-room .br-history-bubble:focus-visible{outline:3px solid #5c4230;outline-offset:7px}
#bell-room .br-history-bubble.br-burst{animation:br-history-burst .56s ease-out both;pointer-events:none}
.br-history-bubble.br-burst:after{content:'';position:absolute;inset:0;border:2px solid #fffaf0;border-radius:50%;animation:br-history-ring .56s ease-out both}
@keyframes br-history-burst{0%{scale:1;opacity:1}46%{scale:1.22;opacity:1}62%{scale:1.3;opacity:.7}100%{scale:1.4;opacity:0}}
@keyframes br-history-ring{0%,46%{scale:1;opacity:0}60%{scale:1.2;opacity:1}100%{scale:1.9;opacity:0}}
@media(max-width:650px){
 #bell-room .br-history-bubble{left:26%;top:calc(var(--br-speech-clear,220px) + 60px);width:84px!important;height:84px!important}
 #bell-room .br-history-bubble[data-account=survey]{left:73%;top:calc(var(--br-speech-clear,220px) + 60px)}
 .br-history-back{left:5%;top:64px;font-size:14px}
 .br-history-more{left:auto;right:5%;top:64px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){
 .br-george{transition:none}
 #bell-room .br-history-bubble,#bell-room .br-history-bubble *{animation:none!important}
}
/* Fraser 5 Nov 10:24: the kids door's bubbles in the Bell room. Glass (skin, turning rainbow rim, shine) copied from
   kids/kids.css; same size (the kids rule, --kb-d set from the room each frame), the same drift and bob (bell_room.mjs
   floatKidsBubbles, from kids.mjs bubblePose), the same wobble, and the same splat when tapped. */
#bell-room .br-kids{background:none!important;box-shadow:none!important;border:0!important;overflow:visible}
#bell-room .br-kids .orb-body{background:none!important;box-shadow:none!important;border-radius:50%;filter:drop-shadow(0 0 6px #ffffffd9) drop-shadow(0 0 14px #9678ff55) drop-shadow(0 8px 7px #281c1047);animation:kb-wobble 3.6s ease-in-out infinite;transition:transform .15s ease}
#bell-room .br-kids:nth-of-type(3n) .orb-body{animation-delay:-1.2s;animation-duration:4.1s}
#bell-room .br-kids:nth-of-type(3n+1) .orb-body{animation-delay:-2.3s;animation-duration:3.3s}
#bell-room .br-kids .orb-skin,#bell-room .br-kids .orb-rim,#bell-room .br-kids .orb-shine,#bell-room .br-kids .orb-face{display:none!important}
#bell-room .br-kids .orb-photo{position:absolute;inset:7%;width:86%;height:86%;border-radius:50%;object-fit:cover;opacity:.93;filter:sepia(.08) saturate(1.1)}
.kb-skin,.kb-rim,.kb-shine{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.kb-skin{background:radial-gradient(circle at 36% 30%,#ffffff70 0,#ffffff12 32%,#96d2ff10 55%,#6e8cff55 80%,#a050ebaa 100%)}
.kb-rim{opacity:.9;background:conic-gradient(from 0deg,#ff8fd0,#ffd56e,#8dffb1,#74d4ff,#b48cff,#ff8fd0);-webkit-mask:radial-gradient(circle,transparent 0 62%,#000 70% 88%,transparent 100%);mask:radial-gradient(circle,transparent 0 62%,#000 70% 88%,transparent 100%);animation:kb-rim 7s linear infinite}
.kb-shine{background:radial-gradient(ellipse 26% 16% at 32% 22%,#fffffffa,#fff0 100%),radial-gradient(ellipse 12% 8% at 72% 78%,#ffffffb3,#fff0 100%)}
@keyframes kb-wobble{0%,100%{transform:scale(1,1)}25%{transform:scale(1.035,.965)}50%{transform:scale(.985,1.015)}75%{transform:scale(.965,1.035)}}
@keyframes kb-rim{to{transform:rotate(1turn)}}
@media (hover:hover) and (pointer:fine){#bell-room .br-kids:not(:disabled):hover .orb-body{animation-play-state:paused;transform:scale(1.12)}}
#bell-room .br-kids:not(:disabled):is(:active,:focus-visible) .orb-body{transform:scale(1.12)}
/* The two offers and the two histories: kids size. Films use roomFilmLayout (kids size, held to fit four with labels). */
#bell-room .br-choices{left:27%;width:44%;top:42%;justify-content:space-around;gap:20px}
#bell-room .br-choice{width:var(--kb-d,200px)!important;height:var(--kb-d,200px)!important}
#bell-room .br-choice-icon{inset:34%!important;font-size:calc(var(--kb-d,200px)*.14)!important;border-radius:50%;background:#fff8e8d9;border:1px solid #685234;color:#3d3326;text-shadow:none;display:grid;place-items:center}
#bell-room .br-history-bubble{width:var(--kb-d,200px)!important;height:var(--kb-d,200px)!important}
#bell-room .br-history-bubble.br-burst{animation:none!important}
#bell-room .br-kids.br-burst .orb-body,#bell-room .br-history-bubble.br-burst:after{visibility:hidden}
/* The splat, played on a free-standing copy so the room can move on at once (kids/kids.css splat and flecks, run once). */
.kb-ghost{position:fixed;z-index:200;transform:translate(-50%,-50%);pointer-events:none}
.kb-ghost-orb{position:absolute;inset:0;border-radius:50%;animation:kb-ghost-orb .16s ease-in both}
.kb-ghost-orb>*:not(.kb-skin):not(.kb-rim):not(.kb-shine):not(.orb-photo){display:none}
.kb-ghost-orb .orb-photo{position:absolute;inset:7%;width:86%;height:86%;border-radius:50%;object-fit:cover;opacity:.93}
@keyframes kb-ghost-orb{0%{transform:scale(1.12)}70%{transform:scale(1.14,.86);opacity:1}100%{transform:scale(1.2,.8);opacity:0}}
.kb-splat{position:absolute;inset:0;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff0 55%,#ffffffd0 63%,#c9b8ff88 68%,#fff0 74%);animation:kb-splat .7s .14s ease-out both}
@keyframes kb-splat{0%{opacity:1;transform:scale(.9)}100%{opacity:0;transform:scale(1.7)}}
.kb-fleck{position:absolute;left:50%;top:50%;display:block;width:9px;height:9px;border-radius:50%;background:#ffffffe6;border:1px solid #b9a8ff88;opacity:0;animation:kb-fleck .7s .14s ease-out both}
.kb-fleck:nth-of-type(2n){width:6px;height:6px;background:#ffe9f6e0}
@keyframes kb-fleck{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--fleck-angle)) translateY(calc(var(--bubble-size,60px)*.4))}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--fleck-angle)) translateY(calc(var(--bubble-size,60px)*.85))}}
@media(max-width:650px){
 #bell-room .br-choices{left:3%;width:94%;top:calc(var(--br-speech-clear,220px) + 14px);justify-content:space-evenly}
 #bell-room .br-choice{width:var(--kb-d,118px)!important;height:var(--kb-d,118px)!important}
 #bell-room .br-history-bubble{top:calc(var(--br-speech-clear,220px) + 14px + var(--kb-d,118px)/2)!important;width:var(--kb-d,118px)!important;height:var(--kb-d,118px)!important}
 #bell-room .br-history-bubble[data-account=survey]{top:calc(var(--br-speech-clear,220px) + 14px + var(--kb-d,118px)/2)!important}
}
@media (prefers-reduced-motion:reduce){#bell-room .br-kids .orb-body,.kb-rim,.kb-ghost *{animation:none!important}}
@media(min-width:651px){#bell-room .br-history-bubble{left:24%}#bell-room .br-history-bubble[data-account=survey]{left:54%}} /* Fraser 5 Nov 10:24: room for two kids-size bubbles to float */
/* 8 Nov (bell_v1, Fraser 12:38 "let's build it and see"): the two Bell stories side by side, labels a size up, and the village window cut back to "The Bell" in the room. */
.br-two{max-width:1040px;margin:0 auto}
.br-two-intro{font-size:clamp(18px,1.7vw,22px);line-height:1.4;margin:0 0 18px}
.br-two-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.br-two-col{background:#fffaf0;border:1px solid #c7b696;border-radius:8px 14px 9px 12px;padding:16px 18px 10px;box-shadow:2px 3px 0 #af997930}
.br-two-col h2{font:600 clamp(20px,1.9vw,26px)/1.2 Georgia,serif;margin:0 0 12px;padding-bottom:9px;border-bottom:2px solid #625343}
.br-two-item{display:grid;grid-template-columns:5.6em 1fr;gap:12px;align-items:baseline;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #e2d6bf;padding:10px 0;color:inherit;font:inherit;font-size:clamp(16px,1.35vw,19px);line-height:1.4}
button.br-two-item{cursor:pointer}button.br-two-item:hover .br-two-text,button.br-two-item:focus-visible .br-two-text{text-decoration:underline;text-decoration-color:#a68b5b}
.br-two-yr{font-weight:600;color:#7a5a2c;white-space:nowrap}
.br-two-col .source{margin:10px 0 4px;color:#6d5e4b}
.br-two-close{font-size:clamp(17px,1.5vw,21px);font-style:italic;text-align:center;margin:22px 0 14px}
#bell-room .br-two-more{display:block;margin:0 auto;min-height:44px;border:1px solid #a79980;border-radius:24px;background:#fff8e9;padding:10px 20px;font-size:16px;cursor:pointer}
@media(max-width:650px){.br-two-cols{grid-template-columns:1fr;gap:16px}.br-two-item{grid-template-columns:4.8em 1fr}}
@media(min-width:651px){.br-choice-label{font-size:19px}.br-film-label{font-size:18px}}
.bell-room-active #window-one .w1-lab,.bell-room-active #window-one .w1-around,.bell-room-active #window-one .w1-year,.bell-room-active #window-one .w1-ways,.bell-room-active #window-one .w1-north,.bell-room-active #window-one .w1-foot{visibility:hidden}
@media(min-width:651px){#bell-room .br-choices:has(>.br-choice:nth-child(3)){left:5%;width:62%;justify-content:space-evenly;gap:12px}} /* 8 Nov (bell_v1): three bubbles (films, history, photographs) clear George */
@media(max-width:650px){#bell-room .br-choices:has(>.br-choice:nth-child(3)){left:2%;width:96%}#bell-room .br-choices:has(>.br-choice:nth-child(3)) .br-choice{width:calc(var(--kb-d,118px)*.8)!important;height:calc(var(--kb-d,118px)*.8)!important}} /* 8 Nov (bell_v1): three fit across a phone */
/* 8 Nov 14:40 (Fraser 14:32): the room's lists (Photographs, More Bell stories) are the story card's sheet: 520 wide over the bar,
   George and the room still in view; one row per story, its picture full width, the year and title under it. */
#bell-room .br-list[data-sheet]{inset:auto;left:24px;top:76px;bottom:24px;width:min(520px,52%);padding:0;background:#f6eedb;border:1px solid #c9b791;display:flex;flex-direction:column;overflow:hidden;z-index:6}
#bell-room .br-list[data-sheet] .br-list-head{position:static;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 24px 10px;margin:0;background:none;border:0}
#bell-room .br-list[data-sheet] h1{font:normal 26px/1.15 Georgia,'Times New Roman',serif;letter-spacing:-.01em}
#bell-room .br-list[data-sheet] .br-list-back{flex:none;min-height:0;padding:0;margin-top:6px;border:0;border-bottom:1px solid #b9a787;border-radius:0;background:none;font:13px 'Avenir Next',Avenir,'Helvetica Neue',sans-serif;color:#6d604c}
#bell-room .br-list[data-sheet] .br-story-grid{display:flex;flex-direction:column;gap:0;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 24px 16px}
#bell-room .br-list[data-sheet] .br-story{display:block;width:100%;padding:12px 0 14px;background:none;border:0;border-bottom:1px solid #d8c9a8;border-radius:0;box-shadow:none;color:#3a2f22;cursor:pointer}
#bell-room .br-list[data-sheet] .br-story img{display:block;width:100%;height:auto;aspect-ratio:740 / 270;object-fit:cover;margin:0 0 8px;background:#e8dcc2}
#bell-room .br-list[data-sheet] .br-story span{display:block;padding:0;font:12px/1.3 'Avenir Next',Avenir,'Helvetica Neue',sans-serif;color:#857761}
#bell-room .br-list[data-sheet] .br-story strong{display:block;padding:2px 0 0;font:normal 19px/1.25 Georgia,'Times New Roman',serif}
#bell-room .br-list[data-sheet] .br-story:hover strong{color:#2f5134}
@media(max-width:650px){
 #bell-room .br-list[data-sheet]{left:0;right:0;top:56px;bottom:0;width:auto;border-width:1px 0 0}
 #bell-room .br-list[data-sheet] .br-list-head{padding:14px 18px 8px}#bell-room .br-list[data-sheet] h1{font-size:22px}
 #bell-room .br-list[data-sheet] .br-story-grid{padding:0 18px 14px}#bell-room .br-list[data-sheet] .br-story strong{font-size:17px}
}