@font-face { font-family: "Fell"; src: url(/fonts/IMFellEnglish-Regular.ttf); font-display: swap; }
@font-face { font-family: "Fell"; src: url(/fonts/IMFellEnglish-Italic.ttf); font-style: italic; font-display: swap; }
@font-face { font-family: "Fell SC"; src: url(/fonts/IMFellEnglishSC.ttf); font-display: swap; }
@font-face { font-family: "Garamond"; src: url(/fonts/EBGaramond.ttf); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Garamond"; src: url(/fonts/EBGaramond-Italic.ttf); font-weight: 400 800; font-style: italic; font-display: swap; }

:root {
  --ink: #2b1e17;
  --ink-soft: #5a4a3f;
  --oxblood: #6e1c22;
  --oxblood-deep: #521419;
  --brass: #8a6a2c;
  --brass-light: #c9a45c;  /* brass on the dark desk */
  --paper: #fbf7ef;        /* warm paper on screen; print stays pure white */
  --paper-shade: #f1eadc;
  --desk: #2a221d;
  --desk-deep: #1c1612;
  --ok: #2f5a3a;
  --error: #8e1f1f;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--desk); color: var(--ink);
  font: 400 17px/1.45 "Garamond", Georgia, serif; font-variant-numeric: oldstyle-nums;
  min-height: 100vh; padding: 20px 16px 48px;
}
::selection { background: var(--oxblood); color: var(--paper); }
a { color: var(--oxblood); text-underline-offset: .18em; text-decoration-thickness: .06em; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Paper sheet with the double-rule frame */
.sheet {
  max-width: 760px; margin: 0 auto; background: var(--paper);
  border: 1.5px solid var(--oxblood); padding: 5px;
  box-shadow: 0 10px 40px rgb(0 0 0 / .45);
}
.sheet-inner { border: .5px solid var(--oxblood); padding: 28px 22px 32px; position: relative; }
.corner { position: absolute; width: 9px; height: 9px; background: var(--brass); transform: rotate(45deg); }
.corner.tl { top: 6px; left: 6px; } .corner.tr { top: 6px; right: 6px; }
.corner.bl { bottom: 6px; left: 6px; } .corner.br { bottom: 6px; right: 6px; }
@media (max-width: 480px) { body { padding: 12px 10px 40px; } .sheet-inner { padding: 22px 14px 26px; } }

.rule { display: flex; align-items: center; gap: 10px; color: var(--brass); margin: 10px auto 18px; max-width: 320px; }
.rule::before, .rule::after { content: ""; flex: 1; border-top: 1px solid currentColor; }
.rule i { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }

.masthead { text-align: center; }
.masthead h1 { font: 400 clamp(2.4rem, 9vw, 3.6rem)/1 "Fell", serif; color: var(--oxblood); }
.masthead p { font-family: "Fell SC", serif; letter-spacing: .12em; font-size: .95rem; }
/* Logo: BS inside a diamond (a square turned 45 degrees), double brass rule */
.monogram {
  display: block; text-decoration: none; width: 50px; height: 50px; margin: 14px auto 24px;
  border: 1px solid var(--brass); padding: 3px; transform: rotate(45deg);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
a.monogram:hover { transform: rotate(45deg) scale(1.08); }
.monogram span { display: grid; place-items: center; height: 100%; border: .5px solid var(--brass); }
.monogram b { transform: rotate(-45deg); font: 400 1rem "Fell SC", serif; color: var(--oxblood); white-space: nowrap; }

h2 {
  font: 400 1.35rem/1.1 "Fell SC", serif; letter-spacing: .08em; color: var(--oxblood);
  margin: 30px 0 8px; text-align: center;
}
h2.italic { font-family: "Fell", serif; font-style: italic; letter-spacing: 0; font-size: 1.7rem; }
h3 { font: 400 1.15rem/1.2 "Fell SC", serif; letter-spacing: .08em; color: var(--oxblood); margin: 22px 0 4px; }

.row { display: flex; align-items: baseline; gap: 6px; }
.leader { flex: 1; border-bottom: 1.5px dotted var(--brass); transform: translateY(-.3em); min-width: 12px; }
.abv, .spirit { color: var(--brass); white-space: nowrap; }
.spirit { font-family: "Fell SC", serif; letter-spacing: .08em; }
.note, .muted { font-style: italic; color: var(--ink-soft); }
.small { font-size: .88rem; }
.center { text-align: center; }

/* A tappable menu line */
.pick {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 7px 8px; margin: 0 -8px; width: calc(100% + 16px); border-radius: 2px;
  transition: background-color .2s ease-out;
}
.pick:hover { background: var(--paper-shade); }
.pick:hover .name { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: .2em; }
.pick .name { font-weight: 500; }
.pick.cocktail .name { font: 400 1.2rem "Fell", serif; }

.columns { columns: 2 300px; column-gap: 34px; }
.columns section { break-inside: avoid-column; }

/* Buttons and fields */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 8px 20px; border: 1px solid var(--oxblood); background: var(--oxblood); color: var(--paper);
  font: 400 1rem "Fell SC", serif; letter-spacing: .08em; cursor: pointer; text-decoration: none;
  transition: background-color .2s ease-out, transform .1s ease-out;
}
.btn:hover { background: var(--oxblood-deep); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn.ghost { background: transparent; color: var(--oxblood); }
.btn.ghost:hover { background: var(--paper-shade); }
.btn.small { min-height: 36px; padding: 4px 12px; font-size: .9rem; }

label, .legend { display: block; font: 400 .95rem "Fell SC", serif; letter-spacing: .06em; color: var(--ink-soft); margin: 14px 0 4px; }
input[type=text], input[type=search], input[type=url], input[type=password], input[type=number], textarea, select {
  width: 100%; min-height: 44px; padding: 8px 10px; background: #fff; border: 1px solid #c9bba4; border-radius: 0;
}
input:focus, textarea:focus, select:focus { border-color: var(--brass); outline: 2px solid color-mix(in srgb, var(--brass) 35%, transparent); outline-offset: 0; }
textarea { min-height: 90px; resize: vertical; line-height: 1.35; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label { margin: 0; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 4px 14px; border: 1px solid #c9bba4;
  font: 400 1rem "Garamond", serif; letter-spacing: 0; color: var(--ink); cursor: pointer; background: #fff;
}
.choices input:checked + span { border-color: var(--oxblood); background: var(--oxblood); color: var(--paper); }
.choices input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }

.message { padding: 10px 14px; border: 1px solid; margin-top: 14px; }
.message.ok { border-color: var(--ok); color: var(--ok); }
.message.error { border-color: var(--error); color: var(--error); }
.message:empty { display: none; }

/* Bottom sheet for ordering */
dialog {
  margin: auto auto 0; width: min(560px, 100%); max-width: 100%; max-height: 92vh; border: 0; padding: 0;
  background: transparent;
}
dialog::backdrop { background: rgb(20 14 10 / .6); }
dialog .sheet { box-shadow: 0 -8px 40px rgb(0 0 0 / .5); }
dialog[open] { animation: rise .35s cubic-bezier(.16, 1, .3, 1); }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 640px) { dialog { margin: auto; } }
@media (prefers-reduced-motion: reduce) { dialog[open] { animation: none; } * { transition: none !important; } }

.nav { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; font-family: "Fell SC", serif; letter-spacing: .08em; }
.nav a { color: var(--brass-light); text-decoration: none; }
.nav a:hover, .nav a[aria-current] { text-decoration: underline; }

.postcode { max-width: 320px; margin: 0 auto; }
.postcode input { text-align: center; font: 500 1.4rem "Garamond", serif; letter-spacing: .12em; font-variant-numeric: lining-nums; }
.switch-bar { text-align: center; margin-top: 30px; font-style: italic; color: var(--ink-soft); font-size: .92rem; }
.check { display: inline-flex; align-items: center; gap: 8px; font: 400 1rem "Garamond", serif; letter-spacing: 0; color: var(--ink); }
.check input { width: 18px; height: 18px; accent-color: var(--oxblood); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }