:root{
  --page-bg:#DCD4C2;
  --paper:#F7F3E9;
  --ink:#2A241D;
  --accent:#7A6046;
  --faint:#D8CFBC;
}
:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --page-bg:#0F0D0A;
    --paper:#1E1A14;
    --ink:#EDE6D6;
    --accent:#C9AE8C;
    --faint:#3A3226;
  }
}
:root[data-theme="dark"]{
  --page-bg:#0F0D0A;
  --paper:#1E1A14;
  --ink:#EDE6D6;
  --accent:#C9AE8C;
  --faint:#3A3226;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--page-bg);
  color:var(--ink);
  font-family:'Public Sans', system-ui, sans-serif;
  padding: 36px 16px 60px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.site-bar{
  width:100%;
  max-width:560px;
  margin:0 0 14px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 14px;
}
.site-nav{
  /* Renders its <a> children as direct flex items of .site-bar instead of
     a nested flex-wrap container — two levels of flex-wrap miscalculate
     the nav's needed width against the outer container and overflow it. */
  display:contents;
}
.site-nav a{
  color:var(--accent);
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.site-nav a:hover{ color:var(--ink); }
.site-nav a[aria-current="page"]{
  color:var(--ink);
  border-bottom:0.6px solid var(--accent);
}
.pager{
  display:flex;
  justify-content:center;
  gap:10px;
  margin: 0 0 4px;
}
.pager a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border:0.6px solid var(--faint);
  border-radius:50%;
  color:var(--accent);
  font-size:11px;
  font-weight:600;
  text-decoration:none;
}
.pager a:hover{ border-color:var(--accent); }
.pager a[aria-current="page"]{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--paper);
}

.theme-toggle{
  flex:0 0 auto;
  margin-left:auto;
  width:26px;
  height:26px;
  border-radius:50%;
  border:0.6px solid var(--ink);
  background:transparent;
  color:var(--ink);
  font-size:13px;
  line-height:1;
  cursor:pointer;
}
.theme-toggle:hover{ background:var(--faint); }

.frame-outer{
  width:100%;
  max-width:560px;
  border:0.8px solid var(--ink);
  padding:6px;
}
.frame-inner{
  border:0.4px solid var(--ink);
  padding: 34px 30px 26px;
  background:var(--paper);
  position:relative;
}
.corner{
  position:absolute;
  width:15px; height:15px;
  pointer-events:none;
}
.corner::before, .corner::after{
  content:"";
  position:absolute;
  background:var(--ink);
}
.corner::before{ width:15px; height:0.8px; }
.corner::after{ width:0.8px; height:15px; }
.corner.tl{ top:-6px; left:-6px; }
.corner.tl::before{ top:0; left:0; }
.corner.tl::after{ top:0; left:0; }
.corner.tr{ top:-6px; right:-6px; }
.corner.tr::before{ top:0; right:0; }
.corner.tr::after{ top:0; right:0; }
.corner.bl{ bottom:-6px; left:-6px; }
.corner.bl::before{ bottom:0; left:0; }
.corner.bl::after{ bottom:0; left:0; }
.corner.br{ bottom:-6px; right:-6px; }
.corner.br::before{ bottom:0; right:0; }
.corner.br::after{ bottom:0; right:0; }

h1.headline{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size: clamp(34px, 7vw, 44px);
  margin:0;
  color:var(--ink);
}
.flourish{ color:var(--accent); line-height:0; }
.flourish svg{ width:36px; height:10px; }

.rule{
  border:none;
  border-top:0.6px solid var(--accent);
  margin: 6px 0 26px;
}

.columns{
  column-gap: 40px;
}
@media (min-width: 620px){
  .columns{ columns: 2; }
  section.category{ break-inside: avoid; }
}

section.category{
  margin-bottom: 22px;
}
section.category h2{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:600;
  color:var(--accent);
  font-size: 21px;
  margin: 0 0 4px;
  padding-bottom:5px;
  border-bottom: 0.6px solid var(--faint);
}
.subhead{
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink);
  font-size: 11px;
  margin: 26px 0 6px;
}
section.category h2 + .subhead{
  margin-top: 10px;
}
.item{ margin-bottom:7px; }
.item .name{
  font-weight:600;
  font-size:14.5px;
  line-height:1.3;
  display:block;
}
.item .note{
  font-weight:400;
  font-size:12px;
  color:var(--accent);
  display:block;
}

/* ---- Drink Specials entries ---- */
.specials{ display:flex; flex-direction:column; }

.special{
  display:flex;
  gap: 18px;
  align-items:flex-start;
  padding: 20px 0;
  border-bottom: 0.6px solid var(--faint);
}
.special:first-child{ padding-top:0; }
.special:last-child{ border-bottom:none; }

.special .text{ flex: 1 1 auto; min-width:0; }
.special .name{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:600;
  font-size: 25px;
  color:var(--ink);
  margin:0 0 5px;
  line-height:1.1;
}
.special .ingredients{
  font-size: 11.5px;
  color:var(--accent);
  margin: 0 0 8px;
  line-height:1.4;
}
.special .description{
  font-size: 13px;
  color:var(--ink);
  line-height:1.55;
  margin:0;
}

.special .image{
  flex: 0 0 auto;
  width: 108px;
}
.special .image img{
  width:100%;
  height:auto;
  display:block;
}

footer{
  text-align:center;
  font-size:11.5px;
  color:var(--accent);
  margin-top: 8px;
}