/* Where people go: editor's picks and maker listings (event page and /e/:slug/options). Labels stay quiet mono text. */
.offer-group{margin-top:28px}
.offer-group+.offer-group{margin-top:44px}
.offer-head{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.offer-h{display:flex;align-items:baseline;gap:10px;margin:0;font:700 21px/1.2 var(--display);letter-spacing:-.02em}
.offer-count{font:500 13px var(--mono);color:var(--ink-3)}
.offer-note{max-width:640px;font-size:14px;color:var(--ink-3)}
.offer-k{font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.event .alts .alt,.options-page .alts .alt{padding:22px 24px;border-radius:18px;gap:8px}
.event .alts .alt-name,.options-page .alts .alt-name{font-size:20px}
/* Maker listings: a ruled, three-column list. Name, one line, labels, the offer. */
.offers {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  column-gap:32px;
  border-top:1px solid var(--line);
}
.offer{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 0 18px;border-bottom:1px solid var(--line)}
.offer-name {
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:fit-content;
  max-width:100%;
  font-size:17px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--ink);
  text-decoration:none;
  overflow-wrap:anywhere;
}
.offer-name .arrow-right{flex:none;color:var(--ink-3);transition:transform .15s,color .15s}
.offer-name:hover{color:var(--link)}
.offer-name:hover .arrow-right{color:var(--link);transform:translateX(2px)}
.offer-line{font-size:14px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.offer-tags{display:flex;flex-wrap:wrap;gap:2px 16px}
.offer-tags .tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.offer-deal{font-size:14px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.offer-deal .offer-k{display:block}
/* "Show all N": a no-JS disclosure. The summary text swaps with CSS. */
.offers-more>summary {
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  margin-top:18px;
  padding:10px 18px;
  border:1px solid var(--line-2);
  border-radius:12px;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  list-style:none;
}
.offers-more>summary::-webkit-details-marker{display:none}
.offers-more>summary::after {
  content:'';
  width:7px;
  height:7px;
  border:solid currentColor;
  border-width:0 2px 2px 0;
  transform:translateY(-2px) rotate(45deg);
}
.offers-more>summary:hover{border-color:var(--ink-3)}
.offers-more[open]>summary{margin-bottom:0}
.offers-more[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.offers-more .when-open,.offers-more[open] .when-shut{display:none}
.offers-more[open] .when-open{display:inline}
.offers-more[open]>.offers{margin-top:18px}
.offers-all{display:inline-flex;align-items:center;gap:6px;margin-top:22px}
/* Options page. */
.options-page{padding-bottom:24px}
.options-page .crumbs{padding:20px 0 8px}
.options-head{display:flex;flex-direction:column;gap:16px;padding:16px 0 8px}
.options-head .eyebrow{margin:0}
.options-title{max-width:18ch;margin:0;font:800 clamp(40px,5.4vw,72px)/.98 var(--display);letter-spacing:-.04em}
.options-back{width:fit-content;padding-block:4px}
.offer-filters{margin:28px 0 8px;padding:14px 0;border-block:1px solid var(--line)}
.offer-filters fieldset{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:0;padding:0;border:0}
.offer-filters legend{float:left;margin-right:4px}
.filter-box{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:600;cursor:pointer}
.filter-box input{width:18px;height:18px;margin:0;accent-color:var(--ember-fill,var(--accent))}
.filter-clear{font-size:14px;color:var(--link)}
.offers-empty{margin-top:28px;font-size:16px;color:var(--ink-2)}
.offers-foot{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
@media(max-width:700px) {
  .offer-h{font-size:19px}
  .event .alts .alt,.options-page .alts .alt{padding:18px}
  .offer-filters fieldset{gap:4px 18px}
  .offer-filters legend{float:none;width:100%}
}