/* hol-trucks.css — food trucks on the home page (ftx-, tkt-: the featured day's lineup on an evergreen
   ticket and the next days on small paper tickets) and the Food Trucks page (ftp-: every sale day as
   a ticket, short tap-to-open rows on a phone). Markup: _Food.cshtml, FoodTrucks.cshtml, _TruckItems.cshtml. */
.ftx { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
.ftx-solo { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
.ftx-intro h2 { font-size: clamp(38px, 5vw, 62px); margin: 14px 0 14px; }
.ftx-intro p { color: var(--ink-2); font-size: 18px; margin: 0 0 24px; max-width: 46ch; }
.ftx-empty { margin: 0; padding: 22px 24px 14px; font: italic 400 20px/1.4 var(--display); color: var(--ink-2); }
/* shared ticket: paper, grain, the countdown's split-flap tile, a perforation with punched notches */
.tkt { position: relative; margin-top: clamp(26px, 3vw, 36px); background: var(--paper) var(--grain); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; padding: 0 0 8px; }
.tkt-head { display: flex; align-items: center; gap: 16px; padding: 20px 24px 20px; background: linear-gradient(90deg, var(--line) 55%, transparent 0) left bottom / 9px 1.5px repeat-x; }
.tkt-tile { flex: none; position: relative; display: grid; justify-items: center; min-width: 58px; padding: 9px 6px 8px; background: var(--cream-2); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(30, 33, 29, .08); }
.tkt-tile::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: rgba(30, 33, 29, .07); }
.tkt-tile b { position: relative; font: 600 30px/1 var(--display); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--pine); font-variant-numeric: tabular-nums; }
.tkt-tile span { position: relative; margin-top: 5px; font: 700 9.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.tkt-when { min-width: 0; display: grid; gap: 6px; }
.tkt-when b { font: 600 clamp(24px, 2.4vw, 30px)/1.05 var(--display); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--pine); }
.tkt-when small { font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.tkt-flag { display: flex; align-items: center; gap: 7px; font: 700 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--berry); }
.tkt-flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(154, 42, 42, .2); }
.tkt-list { position: relative; list-style: none; margin: 0; padding: 6px 24px 4px; }
.tkt-list::before, .tkt-list::after { content: ""; position: absolute; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 1px var(--line); }
.tkt-list::before { left: -11px; } .tkt-list::after { right: -11px; }
.tkt-list li { padding: 11px 0; font: 500 17px/1.3 var(--sans); color: var(--ink); }
.tkt-list li + li { border-top: 1px dashed var(--line); }
.tkt-list .note { display: inline-block; margin-left: 4px; font: 600 11.5px/1 var(--sans); color: var(--pine-3); background: var(--cream-2); border-radius: 999px; padding: 5px 9px; vertical-align: 1px; }
/* the evergreen ticket (the day being featured) */
.tkt-pine { background: var(--pine) var(--grain); border-color: var(--pine); box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 24px 48px rgba(28, 50, 39, .28); }
.tkt-pine .tkt-head { background-image: linear-gradient(90deg, rgba(247, 240, 227, .28) 55%, transparent 0); }
.tkt-pine .tkt-tile { background: var(--berry); box-shadow: 0 8px 18px rgba(154, 42, 42, .35); }
.tkt-pine .tkt-tile::after { background: rgba(255, 255, 255, .12); }
.tkt-pine .tkt-tile b, .tkt-pine .tkt-tile span { color: #fff; }
.tkt-pine .tkt-when b { color: var(--cream); }
.tkt-pine .tkt-when small { color: var(--gold-2); }
.tkt-pine .tkt-flag { color: var(--gold-2); }
.tkt-pine .tkt-flag::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(207, 169, 94, .25); }
.tkt-pine .tkt-list::before, .tkt-pine .tkt-list::after { box-shadow: none; }
.tkt-pine .tkt-list li { color: var(--cream); }
.tkt-pine .tkt-list li + li { border-top-color: rgba(247, 240, 227, .16); }
.tkt-pine .tkt-list .note { background: rgba(247, 240, 227, .12); color: var(--gold-2); }
/* "Coming up": small paper tickets with a date stub, torn along a dotted line */
.ftx-next h3 { margin: 10px 0 18px; font: 600 clamp(28px, 3vw, 38px)/1.05 var(--display); font-variation-settings: "SOFT" 100; color: var(--ink); }
.ftx-minis { display: grid; gap: 14px; }
.tkt-mini { position: relative; display: flex; align-items: stretch; background: var(--paper) var(--grain); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); text-decoration: none; color: inherit; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s; }
.tkt-mini:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(28, 50, 39, .08), 0 20px 40px rgba(28, 50, 39, .14); }
.tkt-stub { position: relative; flex: none; display: grid; place-items: center; padding: 14px 18px; background: linear-gradient(180deg, var(--line) 55%, transparent 0) right top / 1.5px 9px repeat-y; }
.tkt-stub::before, .tkt-stub::after { content: ""; position: absolute; right: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 1px var(--line); }
.tkt-stub::before { top: -11px; } .tkt-stub::after { bottom: -11px; }
.tkt-mini .tkt-tile { min-width: 50px; padding: 7px 5px 6px; }
.tkt-mini .tkt-tile b { font-size: 24px; }
.tkt-body { min-width: 0; display: grid; align-content: center; gap: 4px; padding: 14px 20px 14px 18px; }
.tkt-body b { font: 600 19px/1.15 var(--display); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--pine); }
.tkt-body span { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.ftx-next .arrow-link { margin-top: 18px; }
@media (max-width: 860px) { .ftx { grid-template-columns: 1fr; gap: 36px; align-items: start; } }
@media (max-width: 560px) {
  .tkt-head { gap: 14px; padding: 16px 18px; }
  .tkt-tile { min-width: 52px; }
  .tkt-tile b { font-size: 26px; }
  .tkt-list { padding: 4px 18px 2px; }
  .tkt-list li { font-size: 16.5px; padding: 10px 0; }
  .tkt-stub { padding: 12px 14px; }
  .tkt-body { padding: 12px 14px; }
  .tkt-body span { font-size: 14px; }
}

/* Food Trucks page: each sale day a paper ticket in the calendar style; the day to point people at in evergreen */
.ftp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); align-items: start; }
.ftp-day { position: relative; background: var(--paper) var(--grain); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.ftp-day summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 16px 18px 17px; cursor: default; }
.ftp-day summary::-webkit-details-marker { display: none; }
.ftp-day[open] summary { background: linear-gradient(90deg, var(--line) 55%, transparent 0) left bottom / 9px 1.5px repeat-x; }
/* the split-flap paper tile from the home countdown */
.ftp-tile { flex: none; position: relative; display: grid; justify-items: center; min-width: 54px; padding: 8px 6px 7px; background: var(--cream-2); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(30, 33, 29, .08); }
.ftp-tile::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: rgba(30, 33, 29, .07); }
.ftp-tile b { position: relative; font: 600 27px/1 var(--display); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--pine); font-variant-numeric: tabular-nums; }
.ftp-tile span { position: relative; margin-top: 5px; font: 700 9.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.ftp-when { min-width: 0; display: grid; gap: 6px; }
.ftp-when b { font: 600 21px/1.05 var(--display); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--pine); }
.ftp-when small { font: 700 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ftp-count { display: none; }
.ftp-flag { display: flex; align-items: center; gap: 7px; font: 700 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); white-space: nowrap; }
.ftp-flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(207, 169, 94, .25); }
/* ticket notches where the stub meets the list */
.ftp-list { position: relative; list-style: none; margin: 0; padding: 6px 18px 10px; }
.ftp-list::before, .ftp-list::after { content: ""; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 1px var(--line); }
.ftp-list::before { left: -10px; } .ftp-list::after { right: -10px; }
.ftp-list li { padding: 9px 0; font: 500 15.5px/1.3 var(--sans); color: var(--ink); }
.ftp-list li + li { border-top: 1px dashed var(--line); }
.ftp-list .note { display: inline-block; margin-left: 4px; font: 600 11px/1 var(--sans); letter-spacing: .02em; color: var(--pine-3); background: var(--cream-2); border-radius: 999px; padding: 4px 8px; vertical-align: 1px; }
/* the current day: evergreen like the site's bands, with the calendar's red opening-day tile */
.ftp-day.is-featured { background: var(--pine) var(--grain); border-color: var(--pine); box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 22px 44px rgba(28, 50, 39, .3); }
.ftp-day.is-featured[open] summary { background-image: linear-gradient(90deg, rgba(247, 240, 227, .28) 55%, transparent 0); }
.ftp-day.is-featured .ftp-tile { background: var(--berry); box-shadow: 0 8px 18px rgba(154, 42, 42, .35); }
.ftp-day.is-featured .ftp-tile::after { background: rgba(255, 255, 255, .12); }
.ftp-day.is-featured .ftp-tile b, .ftp-day.is-featured .ftp-tile span { color: #fff; }
.ftp-day.is-featured .ftp-when b { color: var(--cream); }
.ftp-day.is-featured .ftp-when small { color: var(--gold-2); }
.ftp-day.is-featured .ftp-list::before, .ftp-day.is-featured .ftp-list::after { box-shadow: none; }
.ftp-day.is-featured .ftp-list li { color: var(--cream); }
.ftp-day.is-featured .ftp-list li + li { border-top-color: rgba(247, 240, 227, .16); }
.ftp-day.is-featured .ftp-list .note { background: rgba(247, 240, 227, .12); color: var(--gold-2); }
/* days already past, like the calendar's crossed-off days */
.ftp-day.is-past { opacity: .62; box-shadow: none; }
.ftp-day.is-past .ftp-tile b { font-weight: 500; color: #a79f8e; text-decoration: line-through; text-decoration-color: rgba(30, 33, 29, .3); }
.ftp-hint { display: none; }
@media (max-width: 1100px) { .ftp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .ftp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .ftp { grid-template-columns: 1fr; gap: 9px; }
  .ftp-hint { display: block; margin: 0 0 12px; font-size: 15px; color: var(--muted); }
  .ftp-day { border-radius: 14px; }
  .ftp-day summary { cursor: pointer; padding: 9px 14px 9px 10px; gap: 12px; min-height: 60px; }
  .ftp-tile { min-width: 46px; padding: 6px 4px 5px; }
  .ftp-tile b { font-size: 22px; }
  .ftp-when { gap: 4px; }
  .ftp-when b { font-size: 18px; }
  .ftp-when small { font-size: 10px; }
  .ftp-count { display: block; margin-left: auto; font: 600 13px/1 var(--sans); color: var(--muted); white-space: nowrap; }
  .ftp-day.is-featured .ftp-count { color: rgba(247, 240, 227, .8); }
  .ftp-day summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); color: var(--muted); transition: transform .2s; }
  .ftp-day[open] summary::after { transform: rotate(225deg) translateY(-2px); }
  .ftp-day.is-featured summary::after { color: var(--cream); }
  .ftp-list { padding: 4px 16px 8px; }
  .ftp-list li { font-size: 16px; padding: 10px 0; }
}

/* Extra lines a truck can have: its own time when a day's trucks keep different hours, and a description */
.tkt-list small, .ftp-list small { display: block; margin-top: 3px; font: 500 12.5px/1.4 var(--sans); color: var(--muted); }
.tkt-pine .tkt-list small { color: rgba(247, 240, 227, .7); }
.ftp-day.is-featured .ftp-list small { color: rgba(247, 240, 227, .7); }
.tkt-list a, .ftp-list a { color: inherit; text-decoration-color: rgba(154, 42, 42, .4); text-underline-offset: 3px; }