/* DC Cocktail Week 2026 calendar: the week, Monday November 30 through Sunday December 6, as seven day columns of experiences, then every pairing with filters.
   Concept from Together We Dine's Month Poster (the campaign as one object you could screenshot; tap a day for its
   sheet), built for this campaign: every day fronts a different venue's pairing, experiences mark their nights.
   Scoped under .cw; colours from /shared/sqs.css (the site's measured accent and ink) and /shared/tokens.css. */
.cw, .cw *, .cw *::before, .cw *::after { box-sizing: border-box; }
.cw { --cw-r: 20px; --cw-r-s: 14px; --cw-line: #DDD7CE; --cw-ground: #ECE8E1; --cw-meta: #3D4544; font-weight: 400; }
.cw img { display: block; max-width: 100%; }
.cw button { font: inherit; }
.cw-mh { margin: 0 0 14px; }
.cw-h2 { font-size: var(--fs-h2, 2.2rem); line-height: 1.2; color: var(--accent-ink, #C2300E); font-weight: 500; margin: 0 0 4px; }
/* small links in the brand orange sit under 4.5:1 on white; the darker step of the same orange clears it */
.sqs-html a.cw-link { color: var(--accent-ink, #C2300E); }
.cw-sub { margin: 0; color: var(--cw-meta); font-weight: 400; }
/* the week: seven day columns; each day's experiences as equal cards in that day's fair order; a quiet day says so */
.cw-week { margin: 8px 0 44px; }
.cw-strip { display: none; }
.cw-board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: start; }
.cw-day { min-width: 0; background: var(--cw-ground); border: 1px solid var(--cw-line); border-radius: var(--cw-r); padding: 10px 10px 12px; }
.cw-day--today { box-shadow: inset 0 0 0 2px var(--accent-ink, #C2300E); }
.cw-dh { display: flex; flex-direction: column; gap: 0; padding: 2px 4px 10px; }
.cw-dh { min-width: 0; overflow-wrap: anywhere; }
.cw-dh .cw-dow { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cw-meta); }
.cw-dh .cw-date { font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.cw-dh .cw-date small { font-size: .5em; font-weight: 600; color: var(--cw-meta); margin-left: 4px; letter-spacing: 0; }
.cw-dh .cw-n { font-size: .8rem; font-weight: 600; color: var(--accent-ink, #C2300E); margin-top: 6px; }
.cw-dh .cw-n--quiet { color: var(--cw-meta); font-weight: 500; }
.cw-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cw-list > * { min-width: 0; max-width: 100%; }
.cw-ecard { display: block; text-decoration: none; color: var(--ink); background: var(--white); border: 1px solid var(--cw-line); border-radius: var(--cw-r-s); overflow: hidden; min-width: 0; max-width: 100%; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.cw-ecard:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.cw-ecard:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cw-ecard .cw-eph { display: block; aspect-ratio: 4 / 3; background: var(--cw-ground); position: relative; overflow: hidden; }
.cw-ecard .cw-eph img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-ecard .cw-eph .cw-time { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); background: #0A1413; color: var(--white); font-size: .7rem; font-weight: 700; padding: 3px 7px; border-radius: 12px; white-space: normal; line-height: 1.25; text-align: left; }  /* a time wraps rather than losing its end (review 2026-10-15) */
.cw-ecard .cw-eb { display: block; padding: 8px 10px 10px; min-width: 0; }
.cw-ecard .cw-et { margin: 0; font-weight: 700; font-size: .88rem; line-height: 1.3; overflow-wrap: anywhere; }
.cw-ecard .cw-ev { margin: 3px 0 0; font-size: .78rem; color: var(--cw-meta); line-height: 1.35; overflow-wrap: anywhere; }
.cw-more { width: 100%; border: 1px dashed var(--cw-line); background: var(--white); color: var(--accent-ink, #C2300E); font-weight: 600; font-size: .85rem; padding: 10px; min-height: 44px; border-radius: var(--cw-r-s); cursor: pointer; }
.cw-more:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.cw-quiet { display: grid; gap: 8px; }
.cw-quiet .cw-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: var(--cw-r-s); overflow: hidden; opacity: .5; filter: saturate(.75); }
.cw-quiet .cw-mosaic img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.cw-quiet p { margin: 0; font-size: .8rem; color: var(--cw-meta); line-height: 1.4; background: var(--white); border-radius: 10px; padding: 8px 10px; }
.cw-key { margin: 12px 0 0; font-size: .85rem; color: var(--cw-meta); max-width: 70ch; }
/* phone and narrow: a day strip picks the day; only that column shows */
/* the seven columns need ~1100px to hold a title and a time pill; below that the day strip takes over (tablets too) */
@media (max-width: 1099px) {
  /* the strip scrolls sideways rather than squeezing seven days into the width: at enlarged text each button keeps its own size */
  /* the strip wraps to a second row when the days do not fit (the narrowest phones, enlarged text): every day stays in view */
  .cw-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 2px; }
  .cw-strip button { flex: 1 0 2.6em; min-width: 2.6em; border: 1px solid var(--cw-line); background: var(--white); color: var(--ink); border-radius: 12px; padding: 8px 6px; min-height: 56px; cursor: pointer; display: grid; gap: 2px; justify-items: center; font: inherit; }
  .cw-strip button span { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cw-meta); }
  .cw-strip button b { font-size: 1.05rem; font-weight: 700; line-height: 1; }
  .cw-strip button i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink, #C2300E); display: block; }
  .cw-strip button i.off { visibility: hidden; }
  .cw-strip button[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
  .cw-strip button[aria-pressed="true"] span { color: var(--white); opacity: .8; }
  .cw-strip button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
  .cw-board { grid-template-columns: 1fr; }
  .cw-day { display: none; }
  .cw-day.on { display: block; }
  .cw-list { grid-template-columns: minmax(0, 1fr); }
  .cw-ecard { display: grid; grid-template-columns: 104px 1fr; }
  .cw-ecard .cw-eph { aspect-ratio: 1; height: 100%; }
  .cw-ecard .cw-et { font-size: .95rem; }
  .cw-quiet .cw-mosaic { grid-template-columns: repeat(4, 1fr); }
}
/* the filter bar (under the week heading; one set of filters for the board and the shelf) */
.cw-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin: 0 0 12px; }
/* a label never breaks inside its pill: the group wraps to a second row instead (narrow phones, enlarged text) */
.cw-seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--cw-line); border-radius: 24px; padding: 3px; background: var(--white); }
.cw-segb { border: 0; background: transparent; color: var(--ink); font-weight: 600; font-size: .9rem; padding: 8px 14px; min-height: 40px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.cw-segb[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.cw-segb:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.cw-select { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; max-width: 100%; flex-wrap: wrap; }
.cw-select select { font: inherit; font-weight: 500; min-height: 44px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--cw-line); background: var(--white); color: var(--ink); max-width: 100%; min-width: 0; width: min(240px, 100%); }
.cw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-chip { border: 1px solid var(--cw-line); background: var(--white); color: var(--ink); font-weight: 600; font-size: .85rem; padding: 8px 12px; min-height: 40px; border-radius: 999px; cursor: pointer; }
.cw-chip[aria-pressed="true"] { background: var(--accent-ink, #C2300E); border-color: var(--accent-ink, #C2300E); color: var(--white); }
.cw-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.cw-note { margin: 0; padding: 14px 16px; background: var(--cw-ground); border: 1px solid var(--cw-line); border-radius: var(--cw-r-s); color: var(--cw-meta); font-size: .95rem; max-width: 70ch; }
.cw-count { margin: 0 0 14px; color: var(--cw-meta); font-size: .95rem; }
.cw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.cw-card { display: block; text-decoration: none; color: var(--ink); background: var(--white); border: 1px solid var(--cw-line); border-radius: var(--cw-r); overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.06); min-width: 0; }
.cw-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.cw-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cw-card .cw-ph { aspect-ratio: 4 / 5; background: var(--cw-ground); position: relative; }
.cw-card .cw-ph img { width: 100%; height: 100%; object-fit: cover; }
.cw-card .cw-ph .cw-plate { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; font-weight: 600; color: var(--cw-meta); }
.cw-card .cw-price { position: absolute; top: 12px; right: 12px; background: var(--white); color: var(--ink); font-weight: 700; padding: 6px 10px; border-radius: 999px; font-size: .9rem; }
.cw-card .cw-body { padding: 14px 16px 16px; min-width: 0; }
.cw-card .cw-venue { margin: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.cw-card .cw-title { margin: 2px 0 0; color: var(--accent-ink, #C2300E); font-weight: 600; font-size: .98rem; line-height: 1.35; overflow-wrap: anywhere; }
.cw-card .cw-bite { margin: 6px 0 0; font-size: .9rem; color: var(--cw-meta); line-height: 1.45; overflow-wrap: anywhere; }
.cw-card .cw-meta { margin: 8px 0 0; font-size: .8rem; color: var(--cw-meta); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.cw-card .cw-meta span::after { content: "·"; margin-left: 8px; }
.cw-card .cw-meta span:last-child::after { content: ""; }
.cw-empty { padding: 28px 20px; border: 1px dashed var(--cw-line); border-radius: var(--cw-r); text-align: center; color: var(--cw-meta); }
.cw-empty a { color: var(--accent-ink, #C2300E); font-weight: 600; }