@charset "UTF-8";
@font-face {
  font-family: "Ruslan Display";
  src: url("./assets/fonts/ruslan-display.2178818db0.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --parchment: #f2e5c9;
  --gold: #d6b675;
  --display: "Ruslan Display", Georgia, serif;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; background: #110e09; scroll-behavior: smooth; }
body { margin: 0; color: var(--parchment); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
::selection { background: #916127; color: #fff5db; }
.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 14px 20px; background: var(--parchment); color: #20170c; transform: translateY(-180%); border-radius: 3px; }
.skip-link:focus { transform: none; }

.tavern { --signs-top: 56.5%; position: relative; isolation: isolate; width: 100%; max-width: 1600px; min-height: max(800px, 100svh); aspect-ratio: 3 / 2; margin: 0 auto; overflow: clip; background: #21190e; }
.tavern__backdrop { position: absolute; z-index: -4; inset: 0; background: url("./assets/tavern.fc9768983c.webp") center center / cover no-repeat; }
/* The stage is at most 3:2, so cover scales this 3:2 artwork by height.
   Its rear countertop edge stays at 55% even on narrow screens. */
.tavern__counter { position: absolute; z-index: 1; inset: 0; pointer-events: none; clip-path: inset(55% 0 0); background: linear-gradient(90deg, rgb(7 9 6 / 29%), transparent 20%, transparent 80%, rgb(7 9 6 / 29%)), linear-gradient(180deg, transparent 66%, rgb(12 9 5 / 90%) 100%), url("./assets/tavern.fc9768983c.webp") center center / cover no-repeat; }
.tavern__shade { position: absolute; z-index: -3; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(10 12 8 / 74%), rgb(10 12 8 / 59%) 24%, rgb(12 12 7 / 5%) 47%, transparent 66%, rgb(12 9 5 / 12%) 78%, rgb(12 9 5 / 90%) 100%), linear-gradient(90deg, rgb(7 9 6 / 29%), transparent 20%, transparent 80%, rgb(7 9 6 / 29%)); }
.candles { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; stroke: none; }
.candle__glow { fill: url(#candle-halo); opacity: .45; transform-box: fill-box; transform-origin: center; animation: candle-light calc(var(--speed) * 1.73) linear var(--phase) infinite; }
.candle__flame { fill: url(#candle-fire); opacity: .8; transform-box: fill-box; transform-origin: 50% 100%; animation: candle-flutter var(--speed) linear var(--phase) infinite; }
.candle__core { fill: #fff9df; }
.ambient { position: absolute; z-index: -2; pointer-events: none; width: 34%; height: 45%; top: 25%; border-radius: 50%; background: radial-gradient(ellipse, rgb(235 149 50 / 13%), transparent 68%); mix-blend-mode: screen; animation: lantern 5s ease-in-out infinite alternate; }
.ambient--left { left: 0; }
.ambient--right { right: 0; animation-delay: -2s; animation-duration: 7s; }

.masthead { position: absolute; inset: 0 0 auto; padding: 27px 48px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.brand { display: inline-flex; gap: 11px; align-items: center; text-decoration: none; }
.brand svg { width: 39px; height: 39px; color: var(--gold); stroke-width: 1.5; }
.brand > span { font-family: var(--serif); font-weight: 700; font-size: 20px; letter-spacing: .12em; }
.brand__suffix { font-family: var(--sans); font-size: 9px; font-weight: 400; letter-spacing: .16em; margin-left: 4px; color: var(--gold); }
.brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.masthead__note { color: #c9bda1; font-family: var(--serif); font-style: italic; font-size: 13px; letter-spacing: .02em; }
.welcome { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); width: min(90%, 1050px); text-align: center; z-index: 2; }
.eyebrow { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 0 0 12px; color: var(--gold); font-size: 9px; font-weight: 500; line-height: 1.7; letter-spacing: .23em; text-transform: uppercase; }
.eyebrow > span { font-family: Georgia, serif; font-size: 8px; opacity: .7; }
h1 { display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 0; font-weight: 400; text-shadow: 0 3px 30px #090b06, 0 2px 6px #090b06; }
.welcome__kind { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; color: #e4cd9e; }
.welcome__name { font-family: var(--display); font-size: clamp(36px, 4.2vw, 60px); line-height: 1.1; letter-spacing: .015em; text-wrap: balance; }
.welcome__copy { margin: 12px 0 0; color: #d0c6af; font-size: 12px; line-height: 1.65; text-shadow: 0 2px 6px #090b06; }
.barkeep { position: absolute; bottom: 40%; left: 50%; transform: translateX(-50%); width: 35%; max-width: 486px; height: 30%; pointer-events: none; }
.barkeep__character { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform-origin: 50% 100%; filter: drop-shadow(0 4px 14px rgb(9 7 3 / 35%)); animation: breathe 6.5s ease-in-out infinite; }

.signposts { position: absolute; z-index: 4; top: var(--signs-top); left: 50%; transform: translateX(-50%); width: min(82%, 1100px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 21%; scroll-margin-top: 24px; }
.sign { --tilt: -2deg; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 148px; padding: 20px 17px 19px; border: 1px solid transparent; border-radius: 7px 4px 6px 3px; text-decoration: none; text-align: center; color: #ecd4a2; background: none; filter: drop-shadow(0 10px 8px rgb(6 4 1 / 65%)); transform: perspective(700px) rotateX(6deg) rotateZ(var(--tilt)); transition: transform .3s ease, filter .3s ease, color .3s ease; -webkit-tap-highlight-color: rgb(255 207 116 / 20%); }
.sign--dpos { --tilt: 2deg; --wood-flip: scaleX(-1); }
.sign::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: url("./assets/worn-oak.svg") center / 100% 100% no-repeat; transform: var(--wood-flip, none); }
.sign::after { content: ""; position: absolute; z-index: -1; inset: 8px 22px; opacity: 0; pointer-events: none; background: radial-gradient(ellipse, rgb(255 194 92 / 20%), transparent 72%); transition: opacity .3s; }
.sign__ornament { color: #b58d4f; font-size: 10px; margin-bottom: 6px; transition: color .3s, text-shadow .3s; }
.sign__name { font-family: var(--serif); font-size: clamp(17px, 2.2vw, 32px); font-weight: 700; line-height: 1.3; letter-spacing: .065em; text-shadow: 0 2px 2px #1f1208, 0 -1px 0 rgb(252 220 162 / 13%); transition: text-shadow .3s; }
.sign__rule { display: block; margin: 10px auto 8px; width: 55px; height: 1px; background: linear-gradient(90deg, transparent, #bc9152, transparent); }
.sign__action { display: inline-flex; justify-content: center; align-items: center; gap: 9px; font-size: 10px; line-height: 1.5; letter-spacing: .03em; color: #d8bb88; }
.sign__action svg { width: 15px; height: 15px; transition: transform .3s; }
.sign__nail { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #bca16c, #705637 45%, #443022 68%, #20170f); box-shadow: 0 1px 2px #170d03; }
.sign__nail--tl { top: 14%; left: 7%; }
.sign__nail--tr { top: 14%; right: 7%; }
.sign__nail--bl { bottom: 14%; left: 7%; }
.sign__nail--br { bottom: 14%; right: 7%; }
.sign:focus-visible { outline: 2px solid #ffe1a5; outline-offset: 6px; transform: perspective(700px) rotateX(2deg) rotateZ(0deg) translateY(-6px); }
.sign:focus-visible, .sign:active { color: #ffedc6; filter: drop-shadow(0 12px 10px rgb(5 3 1 / 65%)) drop-shadow(0 0 13px rgb(255 182 64 / 48%)); }
.sign:focus-visible::after, .sign:active::after { opacity: 1; }
.sign:focus-visible .sign__name, .sign:active .sign__name { text-shadow: 0 2px 2px #231306, 0 0 15px rgb(255 198 93 / 55%); }
.invitation { position: absolute; z-index: 2; top: calc(var(--signs-top) + 172px); left: 0; width: 100%; margin: 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: 14px; color: #d0bb91; text-shadow: 0 2px 7px #100b05; }
.invitation > span { display: inline-block; margin: 0 9px; color: #a48851; opacity: .7; }
.footer { position: absolute; z-index: 2; bottom: 24px; left: 40px; right: 40px; display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #b1a58d; font-size: 9px; line-height: 1.7; letter-spacing: .04em; }
.footer__domain { color: #c6b087; font-size: 8px; letter-spacing: .15em; }
.footer__motto { font-family: var(--serif); font-style: italic; font-size: 12px; }
.footer__platform { display: inline-flex; align-items: center; gap: 8px; }
.footer__platform svg { width: 15px; height: 17px; stroke-width: 1; color: var(--gold); }
.embers { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.embers i { position: absolute; bottom: 40%; left: 16%; width: 2px; height: 2px; background: #e7b15c; border-radius: 50%; box-shadow: 0 0 6px #c79545; opacity: 0; animation: ember 10s linear infinite; }
.embers i:nth-child(2) { left: 23%; bottom: 38%; animation-delay: -4s; animation-duration: 13s; }
.embers i:nth-child(3) { left: 79%; bottom: 44%; animation-delay: -7s; animation-duration: 11s; }
.embers i:nth-child(4) { left: 88%; bottom: 36%; animation-delay: -2s; animation-duration: 14s; }
.embers i:nth-child(5) { left: 36%; bottom: 48%; animation-delay: -9s; animation-duration: 15s; }
.embers i:nth-child(6) { left: 69%; bottom: 38%; animation-delay: -5s; animation-duration: 12s; }

@media (hover: hover) {
  .sign:hover { color: #fff0cd; transform: perspective(700px) rotateX(2deg) rotateZ(0deg) translateY(-6px); filter: drop-shadow(0 12px 10px rgb(5 3 1 / 65%)) drop-shadow(0 0 13px rgb(255 182 64 / 48%)); }
  .sign:hover::after { opacity: 1; }
  .sign:hover .sign__name { text-shadow: 0 2px 2px #231306, 0 0 15px rgb(255 198 93 / 55%); }
  .sign:hover .sign__ornament { color: #ffe0a0; text-shadow: 0 0 10px #dca348; }
  .sign:hover .sign__action svg { transform: translateX(3px); }
}
@keyframes breathe { 0%, 100% { transform: scale(1, 1) rotate(-.18deg); } 50% { transform: scale(1.006, 1.012) rotate(.18deg); } }
@keyframes lantern { 0%, 100% { opacity: .4; } 23% { opacity: .7; } 26% { opacity: .5; } 60% { opacity: 1; } 63% { opacity: .8; } }
@keyframes ember { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .6; } 70% { opacity: .3; } 100% { opacity: 0; transform: translate(28px, -150px); } }
@keyframes candle-flutter {
  0%, 100% { opacity: .78; transform: scale(.98, 1) skewX(0deg); }
  8% { opacity: .92; transform: scale(1.02, 1.08) skewX(3deg); }
  13% { opacity: .72; transform: scale(.97, .92) skewX(-2deg); }
  17% { opacity: .88; transform: scale(1, 1.04) skewX(1deg); }
  25% { opacity: .66; transform: scale(.94, .88) skewX(-4deg); }
  28% { opacity: .88; transform: scale(1.01, 1.1) skewX(2deg); }
  42% { opacity: .94; transform: scale(1.03, 1.02) skewX(-1deg); }
  47% { opacity: .7; transform: scale(.96, .94) skewX(4deg); }
  51% { opacity: .9; transform: scale(1, 1.12) skewX(-2deg); }
  64% { opacity: .78; transform: scale(.98, .97) skewX(1deg); }
  72% { opacity: .93; transform: scale(1.02, 1.05) skewX(-3deg); }
  76% { opacity: .74; transform: scale(.96, .9) skewX(2deg); }
  89% { opacity: .91; transform: scale(1, 1.1) skewX(-1deg); }
  96% { opacity: .8; transform: scale(.99, .98) skewX(1deg); }
}
@keyframes candle-light {
  0%, 100% { opacity: .4; transform: scale(1); }
  11% { opacity: .58; transform: scale(1.05); }
  19% { opacity: .34; transform: scale(.96); }
  24% { opacity: .5; transform: scale(1.02); }
  43% { opacity: .42; transform: scale(.98); }
  48% { opacity: .6; transform: scale(1.06); }
  65% { opacity: .37; transform: scale(.97); }
  73% { opacity: .55; transform: scale(1.03); }
  86% { opacity: .43; transform: scale(.99); }
}
@media (min-width: 1500px) {
  .eyebrow { font-size: 10px; }
  .welcome__copy { font-size: 13px; }
  .sign { min-height: 162px; }
  .invitation { top: calc(var(--signs-top) + 190px); }
}
@media (max-width: 900px) {
  .masthead { padding: 23px 28px; }
  .brand > span { font-size: 18px; }
  .masthead__note { font-size: 11px; }
  .barkeep { width: 44%; height: 29%; }
  .signposts { width: 85%; column-gap: 13%; }
  .sign { min-height: 132px; padding: 18px 15px; }
  .sign__name { font-size: clamp(18px, 2.8vw, 26px); }
  .invitation { top: calc(var(--signs-top) + 157px); font-size: 13px; }
  .footer { left: 28px; right: 28px; }
}
@media (max-width: 560px) {
  .tavern { --signs-top: 58.5%; min-height: max(800px, 100svh); aspect-ratio: auto; }
  .masthead { padding: 19px 22px; justify-content: center; }
  .brand { gap: 8px; }
  .brand svg { width: 34px; height: 34px; }
  .brand > span { font-size: 18px; }
  .masthead__note { display: none; }
  .welcome { top: 72px; width: 90%; }
  .eyebrow { display: none; }
  h1 { gap: 5px; }
  .welcome__kind { font-size: 22px; }
  .welcome__name { max-width: 360px; font-size: clamp(27px, 6.8vw, 34px); }
  .welcome__copy { max-width: 300px; margin: 10px auto 0; font-size: 11px; line-height: 1.65; }
  .barkeep { width: 82%; max-width: 350px; height: 29%; }
  .signposts { width: calc(100% - 38px); column-gap: 15px; }
  .sign { --tilt: -3deg; min-height: 119px; padding: 16px 8px; }
  .sign--dpos { --tilt: 3deg; }
  .sign__ornament { font-size: 8px; margin-bottom: 7px; }
  .sign__name { font-size: clamp(13px, 3.8vw, 20px); letter-spacing: .035em; }
  .sign__action { font-size: 9px; gap: 5px; }
  .sign__action svg { width: 13px; height: 13px; }
  .sign__rule { width: 39px; margin: 8px 0 6px; }
  .sign__nail { width: 3px; height: 3px; }
  .sign__nail--tl, .sign__nail--tr { top: 14%; }
  .sign__nail--bl, .sign__nail--br { bottom: 14%; }
  .sign__nail--tl, .sign__nail--bl { left: 7%; }
  .sign__nail--tr, .sign__nail--br { right: 7%; }
  .invitation { top: calc(var(--signs-top) + 145px); font-size: 12px; }
  .invitation > span { margin: 0 3px; }
  .footer { bottom: 19px; left: 22px; right: 22px; gap: 8px; flex-wrap: wrap; }
  .footer__motto { order: 3; flex-basis: 100%; text-align: center; font-size: 11px; }
  .footer__domain, .footer__platform { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .candles { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}