/* The Boil Board: a dry-erase board in an aluminum frame, bolted to the shack wall.
   Loaded on the public site and on the admin "Boil board" page (for its preview).
   Marker colors are the three a real board has: red, blue and green. */

.boil-board {
  --b-red: #C4271D; --b-blue: #1B4F9C; --b-green: #1E7F43; --b-ink: #17323A;
  position: relative; color: var(--b-ink); background: #FDFDFC;
  background-image: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.9) 48%, rgba(255,255,255,0) 56%),
                    radial-gradient(120% 80% at 0% 0%, #fff 0%, #F3F4F2 100%);
  border: 12px solid #B9C0C5; border-color: #DDE1E3 #9AA2A8 #8C949A #C9CED2; border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 22px 40px -12px rgba(30,10,8,.55);
  padding: 22px clamp(18px, 3vw, 30px) 18px; font-family: "Barlow", system-ui, sans-serif; line-height: 1.4;
}
.boil-board .marker, .boil-board .board-age + p a { font-family: "Permanent Marker", "Comic Sans MS", cursive; font-weight: 400; }
.bolt { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #9AA2A8 60%, #5E676D); box-shadow: 0 1px 1px rgba(0,0,0,.4); }
.bolt-tl { top: -6px; left: -6px; } .bolt-tr { top: -6px; right: -6px; } .bolt-bl { bottom: -6px; left: -6px; } .bolt-br { bottom: -6px; right: -6px; }
.board-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.board-head h2 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 800; font-size: 1.55rem; line-height: 1; margin: 0; color: var(--b-ink); letter-spacing: 0; text-shadow: none; }
/* The status is a magnet stuck on the board */
.board-magnet { margin: -4px -6px 0 0; padding: 7px 14px 6px; border-radius: 40px; font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 1.05rem; line-height: 1; white-space: nowrap;
  background: #1E7F43; color: #fff; rotate: 3deg; box-shadow: 0 3px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35); }
.is-notyet .board-magnet { background: #F4C21B; color: #3A2C00; }
.is-live .board-magnet { background: #1B4F9C; }
.is-soldout .board-magnet, .is-closed .board-magnet { background: #C4271D; }
.is-offseason .board-magnet { background: #6B757C; }

.board-main { margin: 4px 0 6px; }
.board-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.board-price .marker { font-size: clamp(3.6rem, 9vw, 5.6rem); line-height: 1; color: var(--b-red); letter-spacing: -.01em; }
.board-price .per { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 1.15rem; color: #4D5B60; }
.board-price.is-struck .marker { position: relative; color: #9AA2A8; }
.board-price.is-struck .marker::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: .12em; background: var(--b-red); border-radius: 4px; rotate: -8deg; }
.board-line { font-size: clamp(1.35rem, 3vw, 1.75rem); line-height: 1.25; color: var(--b-blue); margin: 8px 0 6px; }
.board-facts { display: grid; gap: 2px; margin: 10px 0 0; }
.board-facts div { display: grid; grid-template-columns: 58px 1fr; align-items: baseline; gap: 8px; }
.board-facts dt { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 1rem; color: #4D5B60; }
.board-facts dd { margin: 0; font-size: 1.28rem; line-height: 1.3; color: var(--b-blue); }
.board-sub { margin: 8px 0 0; color: #4D5B60; }
.board-note { margin: 12px 0 0; font-size: 1.15rem; line-height: 1.35; color: var(--b-green); rotate: -1deg; }

.board-market { border-top: 2px solid #E3E6E8; margin-top: 14px; padding-top: 10px; }
.board-market h3 { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 1rem; color: #4D5B60; margin: 0 0 4px; letter-spacing: 0; }
.board-market ul { list-style: none; margin: 0; padding: 0; }
.board-market li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
.m-name { font-weight: 600; }
.m-dots { flex: 1; border-bottom: 2px dotted #C3C9CD; translate: 0 -4px; min-width: 16px; }
.m-price { color: var(--b-red); font-size: 1.15rem; white-space: nowrap; }
.m-price small { font-family: "Barlow", sans-serif; font-size: .85rem; color: #4D5B60; }
.board-market li.is-out .m-name { text-decoration: line-through; color: #8C949A; }
.board-market li.is-out .m-price { color: #8C949A; }

.board-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; margin-top: 14px; font-size: .92rem; color: #55666C; }
.board-foot p { margin: 0; }
.board-call { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--b-red); text-decoration: none; border-bottom: 2px solid currentColor; }
.board-call:hover { color: var(--b-ink); }

/* The compact version on the menu and contact pages */
.board-compact { padding: 16px 18px 14px; }
.board-compact .board-price .marker { font-size: clamp(2.6rem, 6vw, 3.6rem); }
.board-compact .board-line { font-size: 1.2rem; }

/* The one orchestrated moment: the price is written onto the board as the page opens */
@media (prefers-reduced-motion: no-preference) {
  .wall .board-price .marker, .wall .board-line { animation: write-on 1.1s cubic-bezier(.6, .1, .3, 1) .35s both; }
  .wall .board-magnet { animation: stick 0.5s cubic-bezier(.3, 1.6, .5, 1) 1.2s both; }
  @keyframes write-on { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes stick { from { opacity: 0; transform: translateY(-14px) scale(1.15); } to { opacity: 1; transform: none; } }
}