:root{--gold:#9c7a33;--gold-soft:#7d5f22;--ink:#4a3a20;--card:#fbf6ec;--card-ink:#3b2f1c}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#f3ece2;overflow:hidden;color:var(--ink);font-family:'Cormorant Garamond',Georgia,serif}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.fx{position:fixed;inset:0;pointer-events:none}
#vig{background:radial-gradient(ellipse at 50% 46%,transparent 58%,rgba(70,45,15,.28) 100%)}
#top{position:fixed;top:0;left:0;right:0;padding:max(14px,env(safe-area-inset-top)) 16px 34px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;background:linear-gradient(rgba(255,250,242,.82),rgba(255,250,242,0));transition:opacity .6s}
#names{font-family:'Great Vibes',cursive;font-size:34px;color:#6e5220;line-height:1;text-align:center}
#names small{display:block;font-family:'Cinzel',serif;font-size:16px;font-weight:600;letter-spacing:.1em;color:#7d5f22;margin-top:8px}
.pill{pointer-events:auto;border:1px solid rgba(156,122,51,.55);background:rgba(255,251,244,.78);color:#5d4520;font:500 14px 'Cormorant Garamond',serif;letter-spacing:.06em;padding:8px 14px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer}
#bottom{position:fixed;left:0;right:0;bottom:0;padding:40px 16px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;transition:opacity .6s;background:linear-gradient(rgba(255,250,242,0),rgba(255,250,242,.55))}
#hint{font-size:17px;letter-spacing:.08em;color:#4d3a18;text-shadow:0 0 10px #fffaf0,0 0 4px #fffaf0;transition:opacity .6s;text-align:center}
#walk{pointer-events:auto;width:54px;height:54px;border-radius:50%;border:1px solid rgba(156,122,51,.6);background:rgba(255,251,244,.8);color:#5d4520;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
#bar{width:min(220px,60vw);height:2px;background:rgba(156,122,51,.22);border-radius:2px;overflow:hidden}
#bar i{display:block;height:100%;width:0;background:var(--gold)}
#focus{position:fixed;left:0;right:0;bottom:0;padding:40px 16px max(22px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;pointer-events:none;transition:opacity .5s;background:linear-gradient(rgba(255,250,242,0),rgba(255,250,242,.7))}
#focus.on{opacity:1}
#focus.on .pill{pointer-events:auto}
#cap{font-style:italic;font-size:23px;color:#4d3a18;text-shadow:0 0 10px #fffaf0,0 0 4px #fffaf0}
#load{position:fixed;inset:0;background:#f7f1e6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity 1.2s;z-index:5}
#load h1{margin:0;font:400 56px 'Great Vibes',cursive;color:#7d5f22}
.fonts-pending #load h1,.fonts-pending #load .dear,.fonts-pending #names{visibility:hidden}
#load .dear{font:500 15px 'Cinzel',serif;letter-spacing:.12em;color:#7d5f22;text-align:center;padding:0 20px}
#load p{margin:0;letter-spacing:.3em;font-size:13px;color:var(--gold)}
#room{position:fixed;inset:0;z-index:3;opacity:0;pointer-events:none;transition:opacity .35s;background:#1b1209}
#room.on{opacity:1;pointer-events:auto}
#room video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#vBar{opacity:0;transition:opacity .35s}
#roomScroll{position:absolute;left:0;right:0;bottom:0;top:9vh;z-index:5;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateY(105%);transition:transform .55s cubic-bezier(.2,.8,.2,1);border-radius:22px 22px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.35)}
#roomScroll.on{transform:none}
#roomScroll .sheet{min-height:100%;border-radius:22px 22px 0 0;padding-top:0}
#roomScroll .block{display:none;border-top:0;margin-top:0;padding-top:8px}
#roomScroll .block.show{display:block}
#pClose{order:99;position:sticky;right:0;flex:none;z-index:3;width:34px;height:34px;margin-left:6px;box-shadow:-10px 0 10px rgba(251,246,236,.95);border-radius:50%;border:1px solid rgba(156,122,51,.5);background:#fffdf8;color:#5d4520;font-size:24px;line-height:1;cursor:pointer}
#cue{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);z-index:4;width:min(320px,84vw);color:#fff8ee;text-align:center;font-size:18px;letter-spacing:.06em;line-height:1.5;padding:22px 26px 20px;border-radius:22px;background:rgba(40,26,12,.38);border:1px solid rgba(255,236,200,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .9s,transform .9s}
#cue.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#cue b{display:block;font:400 34px 'Great Vibes',cursive;letter-spacing:0;color:#ffe9c4;margin-bottom:4px}
#table{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;transition:opacity 1.4s;overflow:hidden;background:#2a1a0d}
#table.on{opacity:1;pointer-events:auto}
#tblScene{position:absolute;inset:0;transform:scale(1.08);transition:transform 6s ease-out}
#table.on #tblScene{transform:scale(1)}
#tblImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#tblHead{position:absolute;top:calc(max(16px,env(safe-area-inset-top)) + 7vh);left:0;right:0;text-align:center;color:#fff3df;text-shadow:0 2px 14px rgba(0,0,0,.6);pointer-events:none}
#tblHead .tn{font:400 44px 'Great Vibes',cursive;line-height:1.1}
#tblHead .td{font:600 13px 'Cinzel',serif;letter-spacing:.14em;margin-top:4px}
#hots{position:absolute;inset:0}
.hot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;opacity:0;transition:opacity .8s}
#table.on .hot{opacity:1}
.hot .tag{display:none}
.hot{width:64px;height:64px;justify-content:center}
.hot .ring{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,243,214,.9);background:rgba(255,236,190,.22);box-shadow:0 0 0 0 rgba(255,236,190,.7);animation:pulse 2.2s ease-out infinite}
.hot .tag{font:600 11px 'Cinzel',serif;letter-spacing:.1em;color:#4a3410;background:rgba(255,250,240,.92);padding:4px 9px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.hot.seen .ring{animation:none;background:rgba(201,165,90,.55)}
.hot.big .ring{width:38px;height:38px;border:2.5px solid #ffe7b0;background:rgba(255,225,160,.35);animation:pulseBig 1.8s ease-out infinite}
@keyframes pulseBig{0%{box-shadow:0 0 0 0 rgba(255,220,150,.9),0 0 18px 4px rgba(255,220,150,.55)}70%{box-shadow:0 0 0 24px rgba(255,220,150,0),0 0 18px 4px rgba(255,220,150,.55)}100%{box-shadow:0 0 0 0 rgba(255,220,150,0),0 0 18px 4px rgba(255,220,150,.55)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,236,190,.7)}70%{box-shadow:0 0 0 16px rgba(255,236,190,0)}100%{box-shadow:0 0 0 0 rgba(255,236,190,0)}}
#tblHint{position:absolute;left:50%;bottom:max(26px,env(safe-area-inset-bottom));transform:translateX(-50%);color:#fff6e6;font-size:17px;letter-spacing:.06em;background:rgba(30,20,10,.45);padding:7px 16px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .8s;white-space:nowrap}
#skip{position:absolute;right:14px;top:calc(max(14px,env(safe-area-inset-top)) + 2px);z-index:6;font:600 12px 'Cinzel',serif;letter-spacing:.1em;color:#fff6e6;background:rgba(30,20,10,.45);border:1px solid rgba(255,236,200,.4);padding:8px 14px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .5s}
#room:not(.film) #skip{opacity:0;pointer-events:none}
#pull{position:absolute;left:50%;top:10px;transform:translate(-50%,-60px);font:600 12px 'Cinzel',serif;letter-spacing:.1em;color:#4a3410;background:rgba(255,250,240,.95);padding:8px 14px;border-radius:999px;transition:transform .2s,opacity .2s;opacity:0;pointer-events:none;z-index:4}
#toast{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font:600 13px 'Cinzel',serif;letter-spacing:.1em;color:#4a3410;background:rgba(255,250,240,.95);padding:9px 16px;border-radius:999px;opacity:0;transition:opacity .4s;pointer-events:none}
#toast.on{opacity:1}

#roomScroll.on{opacity:1}
#room .spacer{height:100vh;display:flex;align-items:center;justify-content:center;padding:0 24px}
#room .cue{color:#fff8ee;text-align:center;font-size:18px;letter-spacing:.06em;line-height:1.5;padding:22px 26px 16px;border-radius:22px;background:rgba(40,26,12,.38);border:1px solid rgba(255,236,200,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(0,0,0,.25)}
#room .cue b{display:block;font:400 34px 'Great Vibes',cursive;letter-spacing:0;color:#ffe9c4;margin-bottom:4px}
#room .cue svg{animation:bob 2.4s ease-in-out infinite;margin-top:6px}
#room .sheet{background:rgba(251,246,236,.95);color:var(--card-ink);border-radius:22px 22px 0 0;padding:30px 22px max(40px,env(safe-area-inset-bottom));text-align:center;min-height:100vh;box-shadow:0 -10px 40px rgba(0,0,0,.3)}
#room .sc{font:400 48px 'Great Vibes',cursive;color:#9c7a33;line-height:1.15;margin:6px 0}
#room .sm{letter-spacing:.2em;font-size:12px;text-transform:uppercase;color:#7d6640}
#room .big{font:600 19px 'Cinzel',serif;margin:16px 0 6px;color:#5d4520}
#room .block{margin:30px auto 0;max-width:420px;border-top:1px solid rgba(201,165,90,.5);padding-top:24px}
#room h3{font:400 34px 'Great Vibes',cursive;color:#9c7a33;margin:0 0 10px}
#room p b{color:#5d4520}
#room p{font-size:18px;line-height:1.5;margin:0 0 12px;color:#4a3a20}
#room p.soft{font-style:italic;color:#7d6640}
#room .tl{list-style:none;padding:0;margin:0;font-size:18px;color:#4a3a20}
#room .tl li{display:flex;justify-content:space-between;padding:7px 4px;border-bottom:1px dotted rgba(156,122,51,.35)}
#room .tl b{font:600 15px 'Cinzel',serif;color:#7d5f22}
#room .btn{display:inline-block;font:500 16px 'Cormorant Garamond',serif;letter-spacing:.06em;padding:11px 20px;border-radius:999px;border:1px solid #c9a55a;background:transparent;color:#5d4520;cursor:pointer;text-decoration:none;margin:4px}
#room .btn.primary{background:#9c7a33;color:#fff8ea;border-color:#9c7a33}
#room form input:not([type=radio]){display:block;width:100%;margin:8px 0;padding:12px 14px;border:1px solid rgba(156,122,51,.5);border-radius:12px;background:#fffdf8;font:18px 'Cormorant Garamond',serif;color:#3b2f1c}
#room .choice{display:flex;gap:16px;justify-content:center;margin:10px 0;font-size:18px}
#room .err{color:#a23a2a;font-size:15px;min-height:18px}
#room .thanks{font-size:19px;font-style:italic;color:#5d4520;padding:10px}
#room .count{display:flex;gap:8px;justify-content:center;margin:16px 0 16px}
#room .count .u{min-width:62px;padding:10px 4px 8px;border-radius:12px;background:#fffdf8;box-shadow:inset 0 0 0 1px rgba(156,122,51,.4),0 3px 10px rgba(90,60,20,.08)}
#room .count .n{display:block;font:600 26px 'Cinzel',serif;color:#7d5f22;line-height:1}
#room .count .l{display:block;font:600 9px 'Cinzel',serif;letter-spacing:.14em;color:#9c7a33;margin-top:5px}
#room .count.done{font:400 34px 'Great Vibes',cursive;color:#9c7a33}
#room .map{border-radius:14px;overflow:hidden;border:1px solid rgba(156,122,51,.4);margin:6px 0 12px;height:220px}
#room .map iframe{width:100%;height:100%;border:0}
#room .lbl{display:block;text-align:left;font-size:16px;color:#7d6640;margin:10px 0 0}
#room select,#room textarea{display:block;width:100%;margin:6px 0 8px;padding:12px 14px;border:1px solid rgba(156,122,51,.5);border-radius:12px;background:#fffdf8;font:18px 'Cormorant Garamond',serif;color:#3b2f1c}
#room details{text-align:left;border-bottom:1px dotted rgba(156,122,51,.35);padding:10px 4px}
#room summary{font-size:19px;color:#4a3a20;cursor:pointer}
#room details p{margin:8px 0 0;font-size:17px}
#room .seal{width:74px;height:74px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:400 30px 'Great Vibes',cursive;color:#9c7a33;background:radial-gradient(circle at 35% 30%,#fffaf0,#efe3cf 70%);box-shadow:inset 0 0 0 3px #f7efe2,inset 0 0 0 4px rgba(156,122,51,.35),0 4px 12px rgba(90,60,20,.18)}
#room .seal span{font-size:20px;margin:0 1px}
#room .seal.small{width:56px;height:56px;font-size:22px;margin-top:40px}
#room .snav{position:sticky;top:0;z-index:2;display:flex;gap:6px;overflow-x:auto;justify-content:flex-start;padding:10px 4px;margin:0 -22px 18px;background:rgba(251,246,236,.97);border-bottom:1px solid rgba(201,165,90,.35);scrollbar-width:none}
#room .snav::-webkit-scrollbar{display:none}
#room .snav a{flex:none;font:600 12px 'Cinzel',serif;letter-spacing:.1em;text-transform:uppercase;color:#5d4520;text-decoration:none;padding:7px 12px;border:1px solid rgba(201,165,90,.5);border-radius:999px}
#room .snav{padding-left:14px;padding-right:14px}
#room .snav a:first-child{margin-left:auto}
#room .snav a:last-child{margin-right:auto}
#room .snav a.on{background:#9c7a33;color:#fff8ea;border-color:#9c7a33}
#room h3.h2{font:400 44px 'Great Vibes',cursive;margin:0}
#room .flour{width:180px;height:14px;margin:4px auto 14px;background:linear-gradient(#b89a5a,#b89a5a) left 50%/70px 1px no-repeat,linear-gradient(#b89a5a,#b89a5a) right 50%/70px 1px no-repeat,radial-gradient(circle,#b89a5a 3px,transparent 3.5px) center/14px 14px no-repeat}
#room h4{font:400 28px 'Great Vibes',cursive;color:#7d5f22;margin:18px 0 6px}
#room .oval{width:230px;height:170px;margin:16px auto 4px;border-radius:50%;padding:7px;background:#fffdf8;box-shadow:0 0 0 1px rgba(156,122,51,.4),0 6px 18px rgba(90,60,20,.15)}
#room .oval img{width:100%;height:100%;object-fit:cover;border-radius:50%}
#room .miles{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 14px;margin:0 -22px;padding-left:22px;scroll-snap-type:x mandatory}
#room .mile{flex:none;width:132px;scroll-snap-align:start;color:#7d5f22}
#room .mile .ic{height:34px}
#room .mile .md{font:600 11px 'Cinzel',serif;letter-spacing:.1em;text-transform:uppercase}
#room .mile .mt{font-style:italic;font-size:17px;color:#4a3a20;margin-bottom:6px}
#room .mile img{width:132px;height:100px;object-fit:cover;border-radius:6px}
#room .mile .mc{font-size:14px;color:#6b5a3e;margin-top:4px;line-height:1.3}
#room .card{margin:18px 0 0;padding:16px 14px 18px;border:1px solid rgba(201,165,90,.45);border-radius:14px;background:#fffdf8;box-shadow:0 4px 14px rgba(90,60,20,.08)}
#room .card .fr{padding:7px;border-radius:10px;background:#fbf6ec;box-shadow:inset 0 0 0 1px rgba(156,122,51,.35);margin-bottom:12px}
#room .card .fr img{display:block;width:100%;height:180px;object-fit:cover;border-radius:6px}
#room .cap{font:600 13px 'Cinzel',serif;letter-spacing:.14em;color:#5d4520}
#room .card h4{margin:6px 0 2px}
#room .addr{font-style:italic;color:#7d6640;margin-bottom:8px}
#room .swatch{display:flex;gap:10px;justify-content:center;margin-top:8px}
#room .swatch i{width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 1px rgba(90,60,20,.2)}
#vinyl{position:absolute;right:14px;bottom:max(16px,env(safe-area-inset-bottom));z-index:4;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;cursor:pointer;opacity:0;transition:opacity 1s;pointer-events:none}
#room.on #vinyl{opacity:1;pointer-events:auto}
#vinyl .rec{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:repeating-radial-gradient(circle,#1b1b1b 0 2px,#262626 2px 3px);box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
#vinyl .lab{width:22px;height:22px;border-radius:50%;background:#e8c9c1;font:400 9px 'Great Vibes',cursive;color:#5d4520;display:flex;align-items:center;justify-content:center}
#vinyl.on .rec{animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#vinyl .vt{font:600 10px 'Cinzel',serif;letter-spacing:.1em;color:#fff6e6;background:rgba(30,20,10,.6);padding:3px 8px;border-radius:999px}
#room .row{margin-top:34px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.hide{opacity:0!important;pointer-events:none!important}
.hide *{pointer-events:none!important}
/* ---- app port (2/10) ---- */
#mute{position:fixed;right:16px;top:calc(max(14px,env(safe-area-inset-top)) + 2px);padding:8px 11px;z-index:2}
#top{justify-content:center}
#hallSkip{pointer-events:auto;background:none;border:0;font:500 15px 'Cormorant Garamond',serif;letter-spacing:.06em;color:#5d4520;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 10px;text-shadow:0 0 8px #fffaf0}
#bar2{width:180px;height:1px;background:rgba(156,122,51,.2)}
#bar2 i{display:block;height:100%;width:0;background:#9c7a33;transition:width .3s}
#cap[hidden]{display:none}
#nogl{position:fixed;inset:0;z-index:1;background:#f3ece2}
#nogl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#nogl .ng{position:absolute;left:0;right:0;bottom:max(40px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;text-shadow:0 0 12px #fffaf0}
#nogl .tn{font:400 46px 'Great Vibes',cursive;color:#6e5220}
#nogl .td{font:600 15px 'Cinzel',serif;letter-spacing:.12em;color:#7d5f22}
#nogl .pill{font-size:18px;padding:10px 22px}
#room .tl li span{text-align:right;padding-left:12px}
#room .was{font-size:17px;color:#5d4520;background:#fffdf8;border:1px solid rgba(156,122,51,.35);border-radius:12px;padding:10px 12px}
#room .made{margin-top:26px;font:600 10px 'Cinzel',serif;letter-spacing:.16em;color:#a08a63;text-transform:uppercase}
#room button[disabled]{opacity:.6}
.fonts-pending #tblHead .tn{visibility:hidden}
#names{max-width:calc(100vw - 120px);white-space:nowrap}
#load h1,#tblHead .tn,#nogl .tn{max-width:calc(100vw - 32px);margin-left:auto;margin-right:auto;white-space:nowrap}

/* =====================================================================================
   SAMSUNG INTERNET'S DARK MODE (Gary 2/10: "make sure the Samsung browser fixes are in")
   Same method as scroll.css (measured on Gary's phone 21/9): Samsung flips every colour a page DRAWS (light
   backgrounds go dark, dark writing goes light) but keeps pictures' colours. So on Android (html[data-ss], set
   from routes/guest.js samsungSafeFor) the light surfaces are real pictures (themes/wedding-hall/assets/ss-*.jpg,
   scripts/make-samsung-safe.js), writing is filled with ink pictures, and lines/rings are pictures shaped by masks.
   The hall itself is WebGL and the table/films are pictures, so they are untouched. Typing boxes flip to dark
   with light writing (still readable), as on the other light designs.
   ===================================================================================== */
[data-ss] .ssbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none;border-radius:inherit}
[data-ss] #load{background:transparent;isolation:isolate}
[data-ss] #room .sheet{position:relative;isolation:isolate;background:transparent}
[data-ss] #room .snav{background:transparent;isolation:isolate;border-bottom-color:transparent}
/* the hall's light fades top and bottom: the page picture, faded by a mask */
[data-ss] #top,[data-ss] #bottom,[data-ss] #focus{background:none;isolation:isolate}
[data-ss] #top::before,[data-ss] #bottom::before,[data-ss] #focus::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ss-page) center/cover;pointer-events:none}
[data-ss] #top::before{-webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent);opacity:.95}
[data-ss] #bottom::before,[data-ss] #focus::before{-webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%);opacity:.75}
/* writing: ink pictures */
[data-ss] :is(#names,#names small,#load h1,#load .dear,#load p,#hint,#cap,#hallSkip,#nogl .tn,#nogl .td,
  #room .sc,#room h3,#room h4,#room .big,#room .cap,#room .count .n,#room .count .l,#room .count.done,#room .mile .md,#room .mile .mt,#room .tl b,#room .seal,
  #room p,#room .tl li span,#room .addr,#room .mile .mc,#room summary,#room .lbl,#room .choice label,#room .was,#room .thanks,#room .made,#room .snav a:not(.on),#room .btn:not(.primary)){
  background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
[data-ss] :is(#names,#names small,#load h1,#load .dear,#load p,#nogl .tn,#nogl .td,#hallSkip,#room .sc,#room h3,#room h4,#room .big,#room .cap,#room .count .n,#room .count .l,#room .count.done,#room .mile .md,#room .mile .mt,#room .tl b,#room .seal,#room .snav a:not(.on),#room .btn:not(.primary)){background-image:var(--ss-ink-accent)}
[data-ss] :is(#hint,#cap,#room p,#room .tl li span,#room .mile .mc,#room summary,#room .choice label,#room .was,#room .thanks){background-image:var(--ss-ink-text)}
[data-ss] :is(#room p.soft,#room .addr,#room .lbl,#room .made){background-image:var(--ss-ink-muted)}
/* script lettering reaches outside its box: room round it so the ink covers every flourish */
[data-ss] :is(#load h1,#room h3,#room h4,#nogl .tn){padding:.15em .35em;margin-left:-.35em;margin-right:-.35em}
[data-ss] #hallSkip{text-decoration:none}
/* lines, rings and frames: pictures shaped by masks */
[data-ss] :is(#room .card,#room .count .u,#room .btn:not(.primary),#room .snav a,.pill,#walk,#pClose,#room .map,#room .oval,#room .card .fr){position:relative;isolation:isolate;border-color:transparent;background:transparent;box-shadow:none}
[data-ss] #mute{position:fixed}
[data-ss] :is(#room .card,#room .count .u,#room .btn:not(.primary),#room .snav a:not(.on),.pill,#walk,#pClose,#room .map,#room .oval,#room .card .fr)::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:var(--ss-line) center/cover;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
[data-ss] :is(#room .btn:not(.primary),.pill,#walk,#pClose)::before{background-image:var(--ss-ink-accent)}
html[data-ss] #room #pClose.x, html[data-ss] #room #pClose{position:sticky;-webkit-text-fill-color:transparent;background:var(--ss-ink-accent) center/cover;-webkit-background-clip:text;background-clip:text}
[data-ss] :is(.pill,#walk,#pClose)::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--ss-white) center/cover;opacity:.85}
[data-ss] #room .snav a.on{background:var(--ss-button) center/cover;-webkit-text-fill-color:#fff8ea;text-shadow:none}
[data-ss] #room .seal{background:none;box-shadow:none}
[data-ss] #room .flour{background:var(--ss-button) center/cover;
  -webkit-mask:linear-gradient(#000,#000) left 50%/70px 1px no-repeat,linear-gradient(#000,#000) right 50%/70px 1px no-repeat,radial-gradient(circle,#000 3px,transparent 3.5px) center/14px 14px no-repeat;
  mask:linear-gradient(#000,#000) left 50%/70px 1px no-repeat,linear-gradient(#000,#000) right 50%/70px 1px no-repeat,radial-gradient(circle,#000 3px,transparent 3.5px) center/14px 14px no-repeat}
[data-ss] #room .tl li,[data-ss] #room details{border-bottom-color:transparent;background:var(--ss-line) left bottom/100% 1px no-repeat}
[data-ss] #bar,[data-ss] #bar2{background:transparent}
[data-ss] #bar i,[data-ss] #bar2 i{background:var(--ss-button) center/cover}
/* the gold buttons: a real picture of the metal inside, the words in the ink picture (public/js/wedding-hall.js) */
[data-ss] :is(#room .btn.primary,#nglGo){position:relative;isolation:isolate;background:transparent;border-color:transparent;overflow:hidden}
[data-ss] .ss-fill{position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;z-index:-1;pointer-events:none;border-radius:inherit}
[data-ss] .ss-ink{background:var(--ss-ink-button) center/cover;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* icons on the light pills: the ink picture shaped like the icon */
[data-ss] :is(#walk,#mute) svg{visibility:hidden}
[data-ss] :is(#walk,#mute) > i.ic{position:absolute;inset:0;background:var(--ss-ink-accent) center/cover;-webkit-mask:var(--ic) center/22px 22px no-repeat;mask:var(--ic) center/22px 22px no-repeat;pointer-events:none}
[data-ss] #walk > i.ic{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E")}
[data-ss] #mute > i.ic{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6'/%3E%3Cpath d='M18.5 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E")}
[data-ss] #mute.off > i.ic{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16 9l5 6M21 9l-5 6'/%3E%3C/svg%3E")}
/* the table's pulsing rings: near-white pictures shaped as rings (a drawn white ring could turn dark) */
[data-ss] .hot .ring{border:0;background:var(--ss-white) center/cover;box-shadow:none;animation:ssPulse 2.2s ease-in-out infinite;
  -webkit-mask:radial-gradient(circle,rgba(0,0,0,.3) 0 58%,#000 62% 70%,transparent 72%);mask:radial-gradient(circle,rgba(0,0,0,.3) 0 58%,#000 62% 70%,transparent 72%)}
[data-ss] .hot.big .ring{animation:ssPulse 1.8s ease-in-out infinite}
[data-ss] .hot.seen .ring{animation:none;background:var(--ss-button) center/cover}
@keyframes ssPulse{50%{transform:scale(1.25);opacity:.75}}
html[data-ss] #room #pClose::after{display:none}   /* its own clipped x would sit under the disc */
html[data-ss] #room #pClose{background-image:var(--ss-ink-accent),var(--ss-page);background-size:cover,cover;-webkit-background-clip:text,padding-box;background-clip:text,padding-box}

/* the names on the heart card of the welcome table (media/table3.jpg, 2/10): placed by layoutHots in wedding-hall.js */
#heart{position:absolute;transform:translate(-50%,-50%);text-align:center;pointer-events:none;color:#8a6a2c;opacity:0;transition:opacity 1.2s .4s}
#table.on #heart{opacity:1}
#heart .hn{font-family:'Great Vibes',cursive;font-size:4.6em;line-height:1.3;white-space:nowrap;overflow:visible;padding:.1em .1em 0}   /* the script's tall E, J and flourishes must not be clipped (Gary 2/10) */
#heart .hn span{display:block}
#heart .hn .amp{display:inline;font-size:.8em;margin-right:.08em}
#heart .hn .amp + span{display:inline}
#heart .hd{font:600 1.4em 'Cinzel',serif;letter-spacing:.12em;margin-top:.5em}
#tblHead[hidden]{display:none}
.fonts-pending #heart{visibility:hidden}
[data-ss] #heart :is(.hn,.hd){background:var(--ss-ink-accent) center/cover;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding:.3em .35em .1em}

/* ---- Gary 2/10 evening ---- */
/* the names on the left again, a little further down (they were nearly under the phone's own top bar) */
#top{justify-content:flex-start;padding-top:max(34px,calc(env(safe-area-inset-top) + 22px))}
#names{text-align:left}
/* the welcome card a little higher */
#cue{top:40%}
/* the doors film a touch brighter, to meet the hall's own doors without a jump in colour */
#vDoors{filter:none}   /* (no lift: the film is already cream; its glow is toned down in the file) */
/* Samsung Internet's dark mode dims every picture (measured 21/9: a real picture to about 71%): give them back their light */
@media (prefers-color-scheme: dark){
  html.samsung #c,html.samsung #room video,html.samsung #tblImg,html.samsung #nogl img,html.samsung #room .card img,html.samsung #room .oval img,html.samsung #room .mile img{filter:brightness(1.3)}
  html.samsung #vDoors{filter:brightness(1.3)}
}
#vinyl{display:none!important}   /* the record player on the table is the music switch (Gary 2/10); the view no longer draws it */
#focus:not(.on) .pill{pointer-events:none}   /* the hidden "Back to the hall" pill sat on top of "Skip to the details" (found by the Secret Garden chat 2/10) */
#room .snav a:last-of-type{margin-right:46px!important}   /* room for the sticky close button, which sat on top of the last tab (More) */