:root{
  --spx:16px;
  --radius-xl:20px;
  --radius-lg:20px;
  --gap-c:24px;

  --brand-primary:#b32517;
  --badge-fg:#fff;
  --h4-fg:#640002;
  --text:#111;

  --bg-main:rgba(0,96,160,0.5);
  --bg-card:rgba(160,64,0,0.5);
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}

.specials{
  clear:both;
  padding-top:20px;
  margin:0 0 2.5rem;
}
.specials *:focus-visible{ outline:2px solid #0044ff; outline-offset:2px; }

.specials__frame{
  position:relative;
  z-index:0;
  border:5px solid var(--brand-primary);
  border-radius:var(--radius-xl);
  background:var(--bg-main);
  padding:32px;
  color:var(--text);
}
@media (max-width:640px){
  .specials__frame{

  padding:15px;

}
}
.specials__badge{
  position:absolute;
  top:0; left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  background:var(--brand-primary);
  color:var(--badge-fg);
font-size: 2.250rem;
  line-height: 2.5rem;
  font-family:"rockwell",sans-serif;
  font-weight:700;
  padding:8px 20px 7px;
  border-radius:20px;
  display:inline-block;
  margin:0;
  white-space:nowrap;
  border:0;
}

.specials__intro{
  margin:10px auto 30px;
  text-align:center;
  max-width:70ch;
  margin-inline:auto;
  font-weight:600;
  color:#000;
}
.specials__intro h3{
  font-family:"rockwell",sans-serif;
  font-weight:700;
  font-size:1.25rem;
  text-transform:uppercase;
  color:#b32517;
  margin:0 0 8px;
  line-height:1.2;
}

.specials__grid{
  display:block!important;
  column-count:3;
  column-gap:var(--gap-c);
   -webkit-column-count:3;       /* Safari prefix */
  -webkit-column-gap:var(--gap-c);
}
@media (max-width:1024px){
  .specials__grid{ -webkit-column-count:2; column-count:2; }
}
@media (max-width:640px){
  .specials__grid{ -webkit-column-count:1; column-count:1; }
}

.specials-card{
  position:relative;
  display:block;
  width:100%;
  break-inside:avoid; -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; page-break-inside:avoid;
  margin:0 0 var(--gap-c);
  border:5px solid var(--brand-primary);
  border-radius:var(--radius-lg);
  background:var(--bg-card);
  padding:35px 20px 10px;
  color:var(--text);
}

@media (max-width:640px){
  .specials-card {
  padding:20px 10px;
  }
}

.specials-card__title{
  position:absolute;
  top:0; left:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  background:var(--brand-primary);
  color:var(--badge-fg);
  font-family:"rockwell",sans-serif;
  font-weight:700;
font-size: 1.3rem;
  line-height: 1.2rem;
  padding:10px 22px;
  display:inline-block;
  margin:0;
  white-space:nowrap;
  border:0;
  margin-bottom: 20px;
}

.specials-card__desc{
  text-align:left;
  margin:0 0 16px;
  color:#000;
  font-weight:600;
  line-height:1.3rem;
}
.specials-card__desc p{ margin:0; }

.specials-card__items{
  list-style:none;
  margin:0;
  padding:0;
  display:block;
}

.specials-item{
  width:100%;
  border:0;
  background:transparent;
  border-radius:0;
  padding:0;
  text-align:left;
}
.specials-item:not(:last-child){ margin-bottom:12px; }

/* H4 headline row — remove all vertical spacing */
.specials-item__headline{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  margin:0;
  padding:0;
}

.specials-item__title{
  display:inline-flex;
  align-items:center;
  gap:0.35em;
  margin:0;
  line-height:1.2;
  font-weight:700;
  font-size:1rem;
  color:var(--h4-fg);
}
.specials-item__title .title-text{ color:inherit; }

.specials-item__icons{ display:inline-flex; gap:0.35em; }
.specials-item__icons i,
.specials-item__icon{ line-height:1; font-size:0.95em; }

/* no gap below headline */
.specials-item__desc{ margin-top:0; }

.specials-item__desc p {
    margin-top:0px;
}

@media (prefers-color-scheme:dark){
  :root{ --text:#eaeaea; }
}

/* Poster skin */
.specials--poster .specials__frame{
  background:
    linear-gradient(to bottom, #ffde75 0%, #fff6cc 50%, #fffbe6 100%),
    radial-gradient(1200px 800px at 0% 0%, rgba(255,255,255,0.12), transparent 70%),
    radial-gradient(1000px 700px at 100% 100%, rgba(0,0,0,0.05), transparent 65%),
    #fffbe6;
  position:relative;
  border-width:5px;
  border-color:var(--brand-primary);
}


@media (max-width:640px){
  .specials--poster .specials__frame{
  background:#fae4a0;
  
}
}
.specials--poster .specials__frame::after{
  content:"";
  position:absolute; inset:10px;
  border:6px dotted var(--brand-primary);
  border-radius:calc(var(--radius-xl) - 10px);
  pointer-events:none;
  opacity:.9;
}

@media (max-width:640px){
  .specials--poster .specials__frame::after{
    content: none !important;   /* or: display:none */
  }
  .specials--poster .specials__frame{
    padding:16px !important;    /* was 32px; shrink just on mobile */
  }
  .specials-card {
  padding:20px 10px;
  }
}
.specials--poster .specials-card__title{
  background:#fff;
  color:#222;
  border:0;
  box-shadow:0 10px 18px rgba(0,0,0,.25);
  transform:translate(-50%, -50%) rotate(-2.2deg);
  letter-spacing:.2px;
}
.specials--poster .specials-card:nth-child(even) .specials-card__title{
  transform:translate(-50%, -50%) rotate(2.2deg);
}
.specials--poster .specials-card{
  background:#fff9e6;
  border-color:var(--brand-primary);
}

.specials--poster .specials-item{
  position:relative;
  color:#000;
  font-size:.875rem;
  font-weight:600;
  margin:0 0 5px;
  line-height:1.38em;
}
.specials--poster .specials-item__title{
  color:var(--h4-fg);
  text-shadow:0 1px 0 rgba(0,0,0,.2);
}

.specials--poster .specials-item__icons i,
.specials--poster .specials-item__icon{
  line-height:1; font-size:.95em;
}
/* Yellow specials block */
.specials-card--yellow{
  background: #ffde75;
  border-color: var(--brand-primary); /* keep your maroon border */
  color: #111;                        /* readable body text */
}

/* Poster skin keeps the same */
.specials--poster .specials-card--yellow{
  background: #ffde75;
  border-color: var(--brand-primary);
}

/* Titles stay consistent */
.specials-card--yellow .specials-item__title{
  color: var(--h4-fg); /* your dark red */
}
/* Yellow block: make the H3 badge red with white text */
.specials-card--yellow .specials-card__title{
  background: var(--brand-primary);
  color: #fff;
}

/* If you're using the poster skin, keep the red badge for yellow blocks */
.specials--poster .specials-card--yellow .specials-card__title{
  background: var(--brand-primary);
  color: #fff;
  border: 0;               /* ensure it's a solid plaque */
  box-shadow: 0 10px 18px rgba(0,0,0,.25); /* match poster depth */
}

/* ===============================
   Safari-only via .is-safari
   =============================== */

/* Use Grid in Safari to sidestep multicol gaps ⇒ clean 3/3/2 layout */
html.is-safari .specials__grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: var(--gap-c);
}
@media (max-width:1024px){
  html.is-safari .specials__grid{ grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}
@media (max-width:640px){
  html.is-safari .specials__grid{ grid-template-columns: 1fr;
  gap: 12px;}
}

/* Keep the title plaque from causing layout gaps in Safari */
html.is-safari .specials-card{
  padding-top: 52px;             /* room for the plaque (tweak 48–60px) */
  break-inside: auto;
  -webkit-column-break-inside: auto;
  page-break-inside: auto;
}
html.is-safari .specials-card__title{
  position: relative;            /* in-flow, no absolute in Safari */
  top: auto; left: auto;
  transform: none;
  display: inline-block;
  margin: -34px auto 12px;       /* overlap the top border (tweak a few px) */
  z-index: 1;
}

/* Keep your poster tilt in Safari (rotation only) */
html.is-safari .specials--poster .specials-card__title{ transform: rotate(-2.2deg); }
html.is-safari .specials--poster .specials-card:nth-child(even) .specials-card__title{
  transform: rotate(2.2deg);
}

/* Optional: visual shadows that don't affect layout sizing */
html.is-safari .specials--poster .specials-card,
html.is-safari .specials--poster .specials-card--yellow{
  /* box-shadow: none; */
  /* filter: drop-shadow(0 12px 22px rgba(0,0,0,.18)); */
}
/* =========================
   Safari title plaque tune-ups
   ========================= */

/* keep the card with a bit more headroom for the rotated plaque */
html.is-safari .specials-card{
  padding-top: 20px; /* try 56–62px if it still feels tight */
}

/* center plaque, size to content, and pull it over the border */
html.is-safari .specials-card__title{
  position: relative;           /* in-flow */
  transform: none;              /* no translate centering */
  display: block;
  width: -moz-fit-content;      /* FF old */
  width: fit-content;           /* modern */
  margin: -36px auto 14px;      /* top overlap, then a small bottom gap */
  z-index: 2;
  padding: 10px;
}

/* poster skin: keep the “paper label” look, but only rotate */
html.is-safari .specials--poster .specials-card__title{
  background: #fff;
  color: #222;
  border: 0;
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
  transform: rotate(-2.2deg) translateY(-2px); /* tiny nudge looks nicer */
  transform-origin: center;
  letter-spacing: .2px;
}

/* alternate rotation on even cards */
html.is-safari .specials--poster .specials-card:nth-child(even) .specials-card__title{
  transform: rotate(2.2deg) translateY(-2px);
}

/* yellow variant keeps the red plaque */
html.is-safari .specials-card--yellow .specials-card__title{
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
}

/* optional: if you still want drop-shadow instead of box-shadow in Safari
html.is-safari .specials--poster .specials-card__title{ box-shadow:none; filter:drop-shadow(0 10px 18px rgba(0,0,0,.25)); }
*/