/* Design explorations for the deals index and category pages (lib/explore-deals.js). Light only. Site tokens, header and footer untouched. */

.ls-dl .x-feedwrap { display: block; }
.ls-dl .dl-index[class*="x-"] .dl-band-paper { margin-top: var(--ls-section); }
.ls-dl .dl-count { white-space: nowrap; }
.ls-dl .dl-chip { position: relative; white-space: nowrap; }
.ls-dl .dl-chip-n { margin-left: 2px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-size: 13px; }
.ls-dl .dl-chip:is([aria-current], [aria-pressed="true"]) .dl-chip-n { background: rgba(255, 255, 255, .18); }
/* Dark: the count sits in a darker well of its chip, in the page's light text, not a pale disc with pale text. */
:root[data-theme="dark"] .ls-dl .dl-chip-n { color: var(--ls-ink); background: rgba(0, 0, 0, .32); }
:root[data-theme="dark"] .ls-dl .dl-chip:is([aria-current], [aria-pressed="true"]) .dl-chip-n { color: inherit; background: rgba(20, 20, 18, .1); opacity: 1; }
.ls-dl .dl-chip:focus-visible, .ls-dl .xb-aisle:focus-visible, .ls-dl .xe-pic:focus-visible { outline: 3px solid var(--ls-ink); outline-offset: 3px; }

/* ---------- the print: the picture for a brand with no photo, in its category's tone, the doodle upright ---------- */
.ls-dl .xp-print { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background-color: var(--ls-tile, var(--ls-sand));
  background-image: radial-gradient(rgba(20, 20, 18, .075) 1.4px, #0000 1.7px); background-size: 12px 12px; }
.ls-dl .xp-print-art { display: grid; place-items: center; width: 64%; height: 64%; }
.ls-dl .xp-print-art .dl-line { display: grid; place-items: center; width: 100%; height: 100%; }
.ls-dl .xp-print-art img { width: 100%; height: 100%; object-fit: contain; }
.ls-dl .xp-print--stub { background-color: var(--stub, #141412); background-image: radial-gradient(rgba(255, 255, 255, .09) 1.4px, #0000 1.7px); }
.ls-dl .xp-print-logo .tud-logo { --logo-size: 96px; border-radius: 20px; box-shadow: 0 0 0 1px var(--stub-line, transparent); }
.ls-dl .xa-fan-photo .xp-print-logo .tud-logo { --logo-size: clamp(120px, 11vw, 168px); border-radius: 24px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .16); }

/* ---------- empty category: designed, the doodle first, the two actions as buttons ---------- */
.ls-dl .xp-empty { justify-self: center; margin-inline: auto; max-width: 560px; padding: 40px 28px 44px; border-radius: 28px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-dl .xp-empty .dl-empty-art { width: 152px; margin-bottom: 6px; }
.ls-dl .xp-empty .dl-empty-actions { gap: 12px; margin-top: 14px; }
.ls-dl .xp-empty .ls-btn { min-height: 48px; }

/* ======================= A: Shop window ======================= */
.ls-dl .xa-hero { position: relative; padding: 72px 0 0; background: var(--ls-sand); }
.ls-dl .xa-hero--cat { background: var(--ls-tile); padding-bottom: 8px; }
.ls-dl .xa-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); align-items: start; gap: 32px clamp(32px, 5vw, 72px); }
.ls-dl .xa-hero-copy { display: grid; gap: 22px; align-content: start; align-self: center; }
.ls-dl .xa-hero .dl-h1 { font-size: clamp(44px, 5.4vw, 80px); max-width: 11ch; }
.ls-dl .xa-hero--cat .dl-h1 { max-width: 12ch; }
.ls-dl .xa-hero .dl-lead { max-width: 46ch; color: var(--ls-ink-2); }
.ls-dl .xa-hero .ls-crumbs { margin-bottom: -10px; }
.ls-dl .xa-hero .ls-crumbs a, .ls-dl .xa-hero .ls-crumbs li { color: var(--ls-ink-2); }
.ls-dl .xa-hero .dl-search-input { background: var(--ls-paper); border-color: var(--ls-ink-2); }
.ls-dl .xa-stage { position: relative; height: clamp(440px, 40vw, 560px); }
.ls-dl .xa-fan { position: absolute; inset: 0; }
.ls-dl .xa-fan-photo { position: absolute; width: 44%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: var(--ls-paper); box-shadow: 0 1px 2px rgba(20, 20, 18, .14), 0 12px 24px -12px rgba(20, 20, 18, .5); border: 6px solid var(--ls-paper); }
.ls-dl .xa-fan-photo > img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.ls-dl .xa-fan-photo .xp-print { border-radius: 10px; }
.ls-dl .xa-fan-photo--0 { top: 0; left: 0; transform: rotate(-7deg); }
.ls-dl .xa-fan-photo--1 { top: -4%; right: 0; z-index: 0; transform: rotate(6deg); }
.ls-dl .xa-fan-photo--2 { bottom: 0; right: 0; width: 36%; transform: rotate(4deg); z-index: 1; }
/* What is drawn on a tilted print turns back upright. */
.ls-dl .xa-fan-photo--0 .xp-print > span { transform: rotate(7deg); }
.ls-dl .xa-fan-photo--1 .xp-print > span { transform: rotate(-6deg); }
.ls-dl .xa-fan-photo--2 .xp-print > span { transform: rotate(-4deg); }
.ls-dl .xa-fan--two .xa-fan-photo--0 { top: 2%; left: 2%; }
.ls-dl .xa-fan--two .xa-fan-photo--1 { top: 0; right: 0; }
.ls-dl .xa-stage-ticket { position: absolute; left: 6%; right: 30%; bottom: 2%; z-index: 2; }
.ls-dl .xa-ticket { position: relative; display: grid; justify-items: start; gap: 10px; padding: 28px 30px 30px; border-radius: 22px; color: #141412; background: var(--ls-paper); box-shadow: 0 2px 4px rgba(20, 20, 18, .08), 0 22px 44px -16px rgba(20, 20, 18, .35);
  -webkit-mask: radial-gradient(circle at 0 62%, #0000 13px, #000 13.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 62%, #0000 13px, #000 13.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 62%, #0000 13px, #000 13.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 62%, #0000 13px, #000 13.5px) right / 51% 100% no-repeat; }
.ls-dl .xa-ticket--orange { background: #FF5C26; box-shadow: none; filter: drop-shadow(0 18px 28px rgba(201, 63, 18, .38)); }
.ls-dl .xa-ticket[class*="ls-tone-"]:not(.xa-ticket--orange) { background: var(--ls-paper); }
.ls-dl .xa-ticket-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 15px; font-weight: 700; }
.ls-dl .xa-ticket-chip { padding: 3px 10px; border-radius: 999px; color: #FAF7F2; background: #141412; font-size: 13px; font-weight: 700; }
.ls-dl .xa-ticket-saving { font-family: var(--tud-font-secondary); font-size: clamp(60px, 6.4vw, 92px); font-weight: 700; line-height: .92; letter-spacing: -0.05em; }
.ls-dl .xa-ticket-line { max-width: 34ch; padding-top: 10px; border-top: 2px dashed rgba(20, 20, 18, .35); font-size: 16px; font-weight: 600; line-height: 1.45; }
.ls-dl .xa-ticket .ls-btn { margin-top: 6px; }
.ls-dl .xa-ticket--orange .ls-btn { color: #FFF8F0; background: #1A1613; border-color: #1A1613; }
.ls-dl .xa-ticket .ls-btn:focus-visible { outline: 3px solid #141412; outline-offset: 3px; }
.ls-dl .xa-stage--cat { height: clamp(400px, 36vw, 500px); }
.ls-dl .xa-stage--cat .xa-fan-photo { width: 46%; }
.ls-dl .xa-stage--cat .xa-stage-ticket { left: 4%; right: 18%; bottom: 6%; }
.ls-dl .xa-stage--cat .xa-ticket-saving { white-space: nowrap; }
.ls-dl .xa-stage--empty { height: clamp(300px, 28vw, 380px); }
.ls-dl .xa-stage--empty .xa-fan-photo--0 { left: 50%; top: 4%; width: 58%; transform: translateX(-50%); }
.ls-dl .xa-stage--empty .xa-fan-photo--0 .xp-print > span { transform: none; }
.ls-dl .xa-chips { position: relative; z-index: 1; padding: 36px 0 36px; }
.ls-dl .xa-chips .dl-chips { margin-top: 0; }
.ls-dl .xa-hero .xa-chips .dl-chip--all:not([aria-current]):not([aria-pressed="true"]) { background: var(--ls-paper); }
.ls-dl .xa-hero .xa-chips .dl-chip { box-shadow: inset 0 0 0 1.5px rgba(20, 20, 18, .14); }
.ls-dl .xa-hero .xa-chips .dl-chip:is([aria-current], [aria-pressed="true"]) { box-shadow: none; }
.ls-dl .xa-hero--cat + .xa-chips { padding-top: 32px; }

.ls-dl .xa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.ls-dl .xa-grid > li { display: grid; }
.ls-dl .xa-grid > li[hidden] { display: none; }
.ls-dl .xa-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border-radius: 20px; color: var(--ls-ink); background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); text-decoration: none; transition: box-shadow 160ms var(--ls-ease), transform 160ms var(--ls-ease); }
.ls-dl .xa-card-pic { position: relative; display: block; aspect-ratio: 16 / 11; background: var(--stub, var(--ls-tone)); }
.ls-dl .xa-card-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ls-dl .xa-card-pic--print { background: none; }
.ls-dl .xa-card-pic--print .xp-print-art { width: 52%; height: 70%; }
.ls-dl .xa-card-badge { position: absolute; left: 18px; bottom: -26px; z-index: 1; padding: 4px; border-radius: 16px; background: var(--ls-paper); box-shadow: var(--ls-shadow); }
.ls-dl .xa-card-badge .tud-logo { --logo-size: 56px; border-radius: 12px; }
.ls-dl .xa-card-body { display: grid; align-content: start; gap: 2px; padding: 40px 22px 14px; }
.ls-dl .xa-card-saving { font-family: var(--tud-font-secondary); font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -0.04em; }
.ls-dl .xa-card-brand { margin-top: 4px; font-size: 18px; font-weight: 700; }
.ls-dl .xa-card-meta { color: var(--ls-soft); font-size: 15px; font-weight: 600; line-height: 1.4; }
.ls-dl .xa-card-act { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin: 6px 22px 22px; padding: 0 20px; border-radius: 999px; color: var(--ls-ink); background: var(--ls-tone); box-shadow: inset 0 0 0 1.5px var(--ls-ink); font-size: 15px; font-weight: 700; }
@media (hover: hover) { .ls-dl .xa-card:hover { box-shadow: inset 0 0 0 1.5px var(--ls-ink), 0 12px 24px rgba(20, 20, 18, .12); transform: translateY(-2px); } }
.ls-dl .xa-card:focus-visible { outline: 3px solid var(--ls-ink); outline-offset: 3px; }
.ls-dl .xa-invite-li .dl-invite { min-height: 100%; flex-direction: column; justify-content: center; text-align: center; }

/* ======================= B: Aisles ======================= */
.ls-dl .xb-hero { padding: 72px 0 8px; }
.ls-dl .xb-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 460px); align-items: center; gap: 24px 56px; }
.ls-dl .xb-hero-copy { display: grid; gap: 20px; }
.ls-dl .xb-hero .dl-h1 { font-size: clamp(44px, 5.4vw, 80px); max-width: 11ch; }
.ls-dl .xb-hero-art { position: relative; display: grid; place-items: center; min-height: 300px; }
.ls-dl .xb-model { width: min(100%, 400px); height: auto; filter: drop-shadow(0 26px 22px rgba(20, 20, 18, .16)); }
.ls-dl .xb-hero-doodle { position: absolute; top: 0; left: -2%; width: 150px; }
.ls-dl .xb-hero-doodle img { width: 100%; height: auto; }
.ls-dl .xb-store { margin-top: 48px; }
.ls-dl .xb-store-in { display: grid; grid-template-columns: 292px minmax(0, 1fr); align-items: start; gap: 48px; }
.ls-dl .xb-side { grid-template-columns: minmax(0, 1fr); min-width: 0; position: sticky; top: calc(var(--site-header-h, 76px) + 20px); display: grid; gap: 16px; }
.ls-dl .xb-aisles ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ls-dl .xb-aisle { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 6px 16px 6px 6px; border-radius: 16px; color: var(--ls-ink); background: var(--ls-tile); font-size: 17px; font-weight: 700; text-decoration: none; transition: box-shadow 140ms var(--ls-ease); }
.ls-dl .xb-aisle--all { background: var(--ls-paper); box-shadow: inset 0 0 0 1.5px var(--ls-line-2); }
.ls-dl .xb-aisle-art { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: rgba(255, 255, 255, .55); }
.ls-dl .xb-aisle--all .xb-aisle-art { background: var(--ls-canvas); }
.ls-dl .xb-aisle-art .dl-line { display: grid; place-items: center; width: 42px; height: 42px; }
.ls-dl .xb-aisle-art img { width: 100%; height: 100%; object-fit: contain; }
.ls-dl .xb-aisle-n { min-width: 32px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-size: 14px; text-align: center; }
@media (hover: hover) { .ls-dl .xb-aisle:not([aria-pressed="true"]):not([aria-current]):hover { box-shadow: inset 0 0 0 1.5px var(--ls-ink); } }
.ls-dl .xb-aisle:is([aria-current], [aria-pressed="true"]) { box-shadow: inset 0 0 0 2.5px var(--ls-ink), 0 6px 14px rgba(20, 20, 18, .12); }
.ls-dl .xb-main .dl-head { margin-bottom: 20px; }
.ls-dl .xb-shelves { display: grid; gap: 20px; }
.ls-dl .xb-shelf { overflow: hidden; border-radius: 24px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-dl .xb-shelf > .xb-rows { padding: 16px 20px 20px; }
.ls-dl .xb-shelf[hidden], .ls-dl .xd-shelf[hidden] { display: none; }
.ls-dl .xb-shelf-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 20px 12px 12px; background: var(--ls-tile, var(--ls-sand)); }
.ls-dl .xb-shelf-art { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: rgba(255, 255, 255, .6); }
.ls-dl .xb-shelf-art img { width: 50px; height: 50px; object-fit: contain; }
.ls-dl .xb-shelf-art--logo { background: none; }
.ls-dl .xb-shelf-art--logo .tud-logo { --logo-size: 56px; border-radius: 14px; }
.ls-dl .xb-shelf-title { font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.ls-dl .xb-shelf-link { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; color: var(--ls-ink); }
/* One ticket per line, so the brand and the action never squeeze. */
.ls-dl .xb-rows { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ls-dl .xb-new { margin-top: 56px; }

.ls-dl .xb-split { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); align-items: start; gap: 48px; padding-top: 24px; }
.ls-dl .xb-col { position: sticky; top: calc(var(--site-header-h, 76px) + 16px); border-radius: 28px; background: var(--ls-tile); }
.ls-dl .xb-col-in { display: grid; gap: 18px; padding: 20px 32px 36px; }
.ls-dl .xb-col .ls-crumbs a, .ls-dl .xb-col .ls-crumbs li { color: var(--ls-ink-2); }
.ls-dl .xb-col-art { display: grid; place-items: center; padding: 8px 0 4px; }
.ls-dl .xb-col-art .dl-line { display: grid; place-items: center; width: min(100%, 280px); aspect-ratio: 1; }
.ls-dl .xb-col-art img { width: 100%; height: 100%; object-fit: contain; }
.ls-dl .xb-col .dl-h1 { font-size: clamp(40px, 3.8vw, 56px); }
.ls-dl .xb-col .dl-cat-lead { margin-top: 0; color: var(--ls-ink-2); font-size: 17px; font-weight: 500; line-height: 1.55; }
.ls-dl .xb-catchips .dl-chips { margin-top: 0; }
.ls-dl .xb-catchips .dl-chips ul { gap: 8px; }
.ls-dl .xb-catchips .dl-chip { gap: 6px; min-height: 44px; padding: 0 14px 0 6px; font-size: 14px; }
.ls-dl .xb-catchips .dl-chip--all { padding: 0 14px; }
.ls-dl .xb-catchips .dl-chip-art { width: 28px; height: 28px; }
.ls-dl .xb-cat-deals { margin-top: 40px; }
.ls-dl .xb-about { margin-top: 64px; max-width: 64ch; }
.ls-dl .xb-about p + p { margin-top: 14px; }
.ls-dl .xb-about p { color: var(--ls-soft); font-size: 17px; line-height: 1.65; }
.ls-dl .xb-faq { margin-top: 64px; }
.ls-dl .xb-doors-band { margin-top: var(--ls-section); padding: clamp(48px, 6vw, 80px) 0; background: var(--ls-paper); }
.ls-dl .xb-doors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ls-dl .xb-doors .dl-tile { min-height: 270px; justify-content: flex-end; gap: 0; padding-top: 24px; }
.ls-dl .xb-doors .dl-tile-art { position: static; display: grid; place-items: center; width: 100%; height: 140px; margin-bottom: 18px; transform-origin: 50% 50%; }
.ls-dl .xb-doors .dl-tile-art img { object-position: center; width: auto; max-width: 100%; height: 100%; max-height: 140px; }

/* ======================= C: Rate board ======================= */
.ls-dl .xc-hero { padding: 56px 0 0; }
.ls-dl .xc-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "crumbs art" "h1 art" "lead art"; column-gap: 48px; row-gap: 22px; align-items: center; }
.ls-dl .xc-hero .ls-crumbs { grid-area: crumbs; }
.ls-dl .xc-hero .dl-h1 { grid-area: h1; font-size: clamp(56px, 7.6vw, 104px); line-height: .92; letter-spacing: -0.05em; max-width: 12ch; }
.ls-dl .xc-hero--cat .dl-h1 { font-size: clamp(48px, 6.2vw, 92px); }
.ls-dl .xc-hero .dl-lead { grid-area: lead; max-width: 54ch; }
.ls-dl .xc-hero-art { grid-area: art; display: grid; place-items: center; justify-self: end; align-self: center; }
.ls-dl .xc-hero-art img { width: 100%; height: auto; }
.ls-dl .xc-hero-doodle { display: block; width: 240px; }
.ls-dl .xc-hero-art--cat .dl-line { display: grid; width: 280px; aspect-ratio: 1; }
.ls-dl .xc-hero-art--cat img { width: 100%; height: 100%; object-fit: contain; }
.ls-dl .xc-boardwrap { margin-top: 48px; }
/* The board is a ticket: the scalloped edge across its top, like the category heroes. */
.ls-dl .xc-board { position: relative; padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px); border-radius: 28px; color: #F6EFE4; background: #1A1613;
  -webkit-mask: radial-gradient(circle at 50% 0, #0000 6px, #000 6.5px) 0 0 / 24px 100% round; mask: radial-gradient(circle at 50% 0, #0000 6px, #000 6.5px) 0 0 / 24px 100% round; }
.ls-dl .xc-board-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); align-items: center; gap: 16px 24px; }
.ls-dl .xc-board-titles { display: flex; align-items: baseline; gap: 6px 20px; flex-wrap: wrap; }
.ls-dl .xc-board--tone .xc-board-head { grid-template-columns: minmax(0, 1fr) auto; }
.ls-dl .xc-board-title { font-size: clamp(30px, 3.1vw, 44px); font-weight: 800; letter-spacing: -0.035em; color: #FAF7F2; }
.ls-dl .xc-board .dl-count { color: #D9D3CC; }
.ls-dl .xc-board .dl-cat-link { margin-left: 12px; color: #FFB08F; }
.ls-dl .xc-board-tools { display: grid; grid-template-columns: minmax(0, 1fr); margin: 20px 0 8px; }
.ls-dl .xc-board-tools > *, .ls-dl .xc-board-head > * { min-width: 0; }
.ls-dl .xc-board .dl-chips { margin-top: 0; }
.ls-dl .xc-board .dl-chips ul { gap: 6px; }
.ls-dl .xc-board .dl-chip { gap: 6px; padding: 0 12px 0 6px; font-size: 14px; box-shadow: none; }
.ls-dl .xc-board .dl-chip-art { width: 28px; height: 28px; }
.ls-dl .xc-board .dl-chip--all { padding: 0 14px; color: #FAF7F2; background: transparent; box-shadow: inset 0 0 0 1.5px #8A7F74; }
.ls-dl .xc-board .dl-chip:is([aria-current], [aria-pressed="true"]) { color: #141412; background: #FAF7F2; box-shadow: none; }
.ls-dl .xc-board .dl-chip:is([aria-current], [aria-pressed="true"]) .dl-chip-n { background: rgba(20, 20, 18, .08); }
.ls-dl .xc-board .dl-chip:focus-visible { outline-color: #FAF7F2; }
:root:not([data-theme="dark"]) .ls-home.ls-dl .xc-board .dl-chip:is([aria-current], [aria-pressed="true"]) img.hm-art-light { display: block; }
:root:not([data-theme="dark"]) .ls-home.ls-dl .xc-board .dl-chip:is([aria-current], [aria-pressed="true"]) img.hm-art-dark { display: none; }
@media (hover: hover) { .ls-dl .xc-board .dl-chip:not([aria-current]):not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 2px #FAF7F2; } }
.ls-dl .xc-board .dl-search-input { color: #FAF7F2; background: #24201C; border-color: #8A7F74; }
.ls-dl .xc-board .dl-search-input::placeholder { color: #C9BFB4; }
.ls-dl .xc-board .dl-search-input:focus-visible { outline: 3px solid #FAF7F2; outline-offset: 2px; }
.ls-dl .xc-board .dl-search-icon, .ls-dl .xc-board .dl-search-clear { color: #D9D3CC; }
.ls-dl .xc-rows { margin: 0; padding: 0; list-style: none; }
.ls-dl .xc-rows > li[hidden] { display: none; }
.ls-dl .xc-rows > li + li { border-top: 2px dashed #4A423A; }
.ls-dl .xc-row { display: grid; grid-template-columns: minmax(220px, 300px) 72px minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 20px 12px; border-radius: 16px; color: inherit; text-decoration: none; transition: background 140ms var(--ls-ease); }
/* The saving in its category's colour: one glance says how much and what kind. */
.ls-dl .xc-saving { font-family: var(--tud-font-secondary); font-size: clamp(40px, 4.2vw, 60px); font-weight: 700; line-height: .95; letter-spacing: -0.05em; color: var(--ls-tile, #FAF7F2); white-space: nowrap; }
.ls-dl .xc-pic { position: relative; display: block; width: 72px; height: 72px; border-radius: 16px; overflow: visible; background: #2B2622; }
.ls-dl .xc-pic > img, .ls-dl .xc-pic > .xp-print { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.ls-dl .xc-pic .xp-print-art { width: 74%; height: 74%; }
.ls-dl .xc-pic-logo { position: absolute; right: -10px; bottom: -10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--stub, #FFFFFF); box-shadow: 0 0 0 2px #1A1613; overflow: hidden; }
.ls-dl .xc-pic-logo .tud-logo { --logo-size: 36px; border-radius: 10px; }
.ls-dl .xc-pic--blank { background: none; }
.ls-dl .xc-text { display: grid; gap: 4px; min-width: 0; }
.ls-dl .xc-brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 20px; font-weight: 700; color: #FAF7F2; }
.ls-dl .xc-new { padding: 2px 10px; border-radius: 999px; color: #141412; background: #FF6B35; font-size: 13px; font-weight: 700; }
.ls-dl .xc-meta { color: #D9D3CC; font-size: 15px; font-weight: 600; }
.ls-dl .xc-act { display: inline-grid; place-items: center; min-width: 132px; min-height: 44px; padding: 0 22px; border-radius: 999px; color: #141412; background: #FAF7F2; font-size: 15px; font-weight: 700; text-align: center; }
@media (hover: hover) { .ls-dl .xc-row:hover { background: #24201C; } .ls-dl .xc-row:hover .xc-act { background: var(--ls-tile, #FFFFFF); } }
.ls-dl .xc-row:focus-visible { outline: 3px solid #FAF7F2; outline-offset: 2px; }
.ls-dl .xc-saving--invite { display: grid; place-items: start; color: #C9BFB4; }
.ls-dl .xc-row--invite .xc-act { color: #FAF7F2; background: transparent; box-shadow: inset 0 0 0 1.5px #FAF7F2; }
.ls-dl .xc-board .dl-empty { color: #F6EFE4; }
.ls-dl .xc-board .dl-empty p { color: #D9D3CC; }
.ls-dl .xc-board .dl-empty .ls-btn--line { color: #FAF7F2; border-color: #FAF7F2; }
.ls-dl .xc-board .theme-art-light { filter: invert(1) sepia(.15); }
.ls-dl .xc-cats { display: grid; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ls-ink); }
.ls-dl .xc-cats > li { border-bottom: 2px solid var(--ls-ink); }
.ls-dl .xc-cat { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 14px 8px; color: var(--ls-ink); text-decoration: none; transition: background 140ms var(--ls-ease); }
.ls-dl .xc-cat-art { display: grid; place-items: center; width: 88px; height: 72px; border-radius: 14px; background: var(--ls-tile); }
.ls-dl .xc-cat-art .dl-line { display: grid; width: 60px; height: 60px; }
.ls-dl .xc-cat-art img { width: 100%; height: 100%; object-fit: contain; }
.ls-dl .xc-cat-name { font-size: clamp(28px, 3.4vw, 48px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.ls-dl .xc-cat-n { color: var(--ls-soft); font-size: 16px; font-weight: 700; }
@media (hover: hover) { .ls-dl .xc-cat:hover { background: var(--ls-tile); } .ls-dl .xc-cat:hover .xc-cat-name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; } }
.ls-dl .xc-cat:focus-visible { outline: 3px solid var(--ls-ink); outline-offset: 2px; }
.ls-dl .xc-aboutfaq { margin-top: var(--ls-section); }

/* ======================= D: Shop aisles ======================= */
.ls-dl .xd-hero:not(.xa-hero--cat) { padding-bottom: 56px; }
.ls-dl .xd-hero .xa-hero-copy { align-self: center; padding-bottom: 32px; }
.ls-dl .xd-store { margin-top: 56px; }
.ls-dl .xd-shelves { display: grid; gap: 28px; }
.ls-dl .xd-shelf { overflow: hidden; border-radius: 26px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-dl .xd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 20px; }
.ls-dl .xd-grid .xa-card { box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-dl .xd-grid .xa-card-saving { font-size: 32px; }
.ls-dl .xd-grid .xa-card-pic { aspect-ratio: 16 / 10; }
/* A shelf with a single deal lays it out wide: the picture beside the words. */
.ls-dl .xd-shelf--one .xd-grid { grid-template-columns: minmax(0, 1fr); }
.ls-dl .xd-shelf--one .xa-card { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: 1fr auto; }
.ls-dl .xd-shelf--one .xa-card-pic { grid-row: 1 / 3; aspect-ratio: auto; min-height: 236px; }
.ls-dl .xd-shelf--one .xa-card-badge { left: auto; right: -22px; bottom: 18px; }
.ls-dl .xd-shelf--one .xa-card-body { align-content: end; padding: 28px 28px 8px 44px; }
.ls-dl .xd-shelf--one .xa-card-act { margin: 10px 28px 28px 44px; }
.ls-dl .xd-side-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.ls-dl .xd-cat-store { margin-top: 56px; }
.ls-dl .xd-grid--cat { padding: 0; }
.ls-dl .xd-grid--cat .xa-invite-li { grid-column: 1 / -1; }
.ls-dl .xd-grid--cat .xa-invite-li .dl-invite { min-height: 96px; flex-direction: row; text-align: left; justify-content: flex-start; }

/* ======================= E: This week ======================= */
.ls-dl .xe-cover { padding: 56px 0 0; }
.ls-dl .xe-mast { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "crumbs crumbs" "h1 stamp"; align-items: center; gap: 12px 40px; }
.ls-dl .xe-mast .ls-crumbs { grid-area: crumbs; }
.ls-dl .xe-mast .dl-h1 { grid-area: h1; font-size: clamp(52px, 7.2vw, 104px); line-height: .92; letter-spacing: -0.05em; max-width: 12ch; }
.ls-dl .xe-stamp, .ls-dl .xe-mast-art { grid-area: stamp; justify-self: end; }
.ls-dl .xe-stamp { display: grid; place-items: center; width: 172px; height: 172px; border-radius: 50%; color: var(--ls-accent-text); box-shadow: inset 0 0 0 3px currentColor; text-align: center; }
.ls-dl .xe-stamp-in { display: grid; place-items: center; gap: 2px; width: 146px; height: 146px; border: 2px dashed currentColor; border-radius: 50%; padding-top: 6px; }
.ls-dl .xe-stamp-small { font-size: 15px; font-weight: 700; }
.ls-dl .xe-stamp-big { max-width: 6.5ch; font-family: var(--tud-font-secondary); font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; align-self: start; }
.ls-dl .xe-mast-art .dl-line { display: grid; width: 240px; aspect-ratio: 1; }
.ls-dl .xe-mast-art img { width: 100%; height: 100%; object-fit: contain; }
.ls-dl .xe-mast-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: end; gap: 20px 56px; margin-top: 28px; }
.ls-dl .xe-mast-sub .dl-lead { max-width: 56ch; color: var(--ls-ink-2); }
.ls-dl .xe-mast-sub:not(:has(.dl-search)) { grid-template-columns: minmax(0, 1fr); }
.ls-dl .xe-cover-story { position: relative; margin-top: 44px; }
.ls-dl .xe-cover-pic { position: relative; display: block; overflow: hidden; aspect-ratio: 2.35 / 1; border-radius: 28px; background: var(--ls-sand); }
.ls-dl .xe-cover-pic > img { width: 100%; height: 100%; object-fit: cover; }
.ls-dl .xe-cover-pic .xp-print-art { width: 34%; height: 76%; margin-left: 44%; }
.ls-dl .xe-cover-line { position: absolute; left: 32px; bottom: 32px; display: grid; justify-items: start; gap: 10px; width: min(480px, 44%); padding: 26px 28px 28px; border-radius: 22px; color: #141412; background: var(--ls-paper); box-shadow: 0 2px 4px rgba(20, 20, 18, .08), 0 22px 44px -16px rgba(20, 20, 18, .4); }
.ls-dl .xe-cover-saving { font-family: var(--tud-font-secondary); font-size: clamp(56px, 6vw, 88px); font-weight: 700; line-height: .92; letter-spacing: -0.05em; }
.ls-dl .xe-cover-deck { max-width: 36ch; color: var(--ls-ink-2); font-size: 16px; font-weight: 600; line-height: 1.5; }
.ls-dl .xe-cover-line .ls-btn { margin-top: 6px; }
.ls-dl .xe-issue { margin-top: var(--ls-section); }
.ls-dl .xe-bar { display: grid; gap: 16px; margin-bottom: 8px; padding: 16px 0 18px; border-bottom: 2px solid var(--ls-ink); background: var(--ls-canvas); }
.ls-dl .xe-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.ls-dl .xe-bar .dl-h2 { margin-bottom: 0; }
.ls-dl .xe-bar .dl-chips { margin-top: 0; }
@media (min-width: 900px) and (min-height: 760px) { .ls-dl .xe-bar:not(.xe-bar--cat) { position: sticky; top: var(--site-header-h, 76px); z-index: 5; } }
.ls-dl .xe-spreads { margin: 0; padding: 0; list-style: none; }
.ls-dl .xe-spreads > li[hidden] { display: none; }
.ls-dl .xe-item + .xe-item { border-top: 2px dashed var(--ls-line-2); }
.ls-dl .xe-spread { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "pic copy"; align-items: center; gap: 32px clamp(32px, 5vw, 72px); padding: clamp(40px, 5vw, 64px) 0; }
.ls-dl .xe-spread--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "copy pic"; }
.ls-dl .xe-pic { grid-area: pic; position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 24px; background: var(--ls-sand); }
.ls-dl .xe-pic > img, .ls-dl .xe-pic > .xp-print { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
.ls-dl .xe-pic--print .xp-print-art { width: 46%; height: 60%; }
.ls-dl .xe-pic-logo { position: absolute; left: 20px; bottom: -22px; display: grid; padding: 4px; border-radius: 18px; background: var(--ls-paper); box-shadow: var(--ls-shadow); }
.ls-dl .xe-pic-logo .tud-logo { --logo-size: 64px; border-radius: 14px; }
.ls-dl .xe-copy { grid-area: copy; display: grid; justify-items: start; align-content: center; gap: 8px; }
.ls-dl .xe-saving { font-family: var(--tud-font-secondary); font-size: clamp(60px, 6.4vw, 96px); font-weight: 700; line-height: .9; letter-spacing: -0.05em; }
.ls-dl .xe-brand { font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -0.02em; }
.ls-dl .xe-deck { max-width: 38ch; margin-top: 6px; color: var(--ls-ink-2); font-size: 18px; font-weight: 500; line-height: 1.55; }
.ls-dl .xe-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ls-dl .xe-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--ls-tile, var(--ls-sand)); font-size: 14px; font-weight: 700; }
.ls-dl .xe-tag--plain { padding: 0 14px; background: var(--ls-paper); box-shadow: inset 0 0 0 1.5px var(--ls-line-2); }
.ls-dl .xe-tag-art { display: grid; width: 26px; height: 26px; }
.ls-dl .xe-tag-art img { width: 100%; height: 100%; object-fit: contain; }
.ls-dl .xe-act { margin-top: 16px; min-width: 180px; }
.ls-dl .xe-invite { margin-top: 24px; }
.ls-dl .xe-chips { padding-top: 40px; }
.ls-dl .xe-essay-cols { columns: 2 320px; column-gap: 56px; }
.ls-dl .xe-essay-cols p { margin-bottom: 14px; color: var(--ls-ink-2); font-size: 18px; line-height: 1.65; break-inside: avoid; }
.ls-dl .xe-faq .ls-faq { max-width: 820px; }

/* ======================= F: This week's shop window (A and E in one page) ======================= */
/* One thin hero: E's masthead, with The Uni Deals' own art on a round sticker where E had its date stamp. */
.ls-dl .xf-page .xe-cover, .ls-dl .xe-cover:has(.xf-art) { padding-top: 48px; }
.ls-dl .xf-art { grid-area: stamp; justify-self: end; display: grid; place-items: center; width: 212px; aspect-ratio: 1; border-radius: 50%; background: var(--ls-tile, var(--ls-sand)); }
.ls-dl .xf-art--hub { background: var(--ls-orange); }
/* The shopper's mass sits high in her frame (bags up): nudged down so she reads centred on the disc. */
.ls-dl .xf-art--hub > img { width: 78%; height: auto; transform: translateY(4%); }
.ls-dl .xf-art .dl-line { display: grid; width: 66%; aspect-ratio: 1; }
.ls-dl .xf-art .dl-line--wide { width: 78%; aspect-ratio: 960 / 649; }
.ls-dl .xf-art .dl-line img { width: 100%; height: 100%; object-fit: contain; }
/* The beauty and care doodle carries its weight on the left (the bottle; the brush is thin), so its ink mass sits at 40% across:
   it moves right by its measured offset to sit optically centred in the disc. */
.ls-dl .xf-art .dl-line--beauty-care { transform: translateX(var(--dl-dx)); }

/* E's issue bar, straight under the hero: the one place to browse every deal and category. */
.ls-dl .xf-issue { margin-top: 36px; }
.ls-dl .xf-bar .dl-h2 { flex: 1 1 260px; min-width: 0; }
.ls-dl .xf-bar { grid-template-columns: minmax(0, 1fr); margin-bottom: 28px; }
.ls-dl .xf-chips { padding-top: 40px; }

/* The cards: A's photo card, E's words. */
.ls-dl .xf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.ls-dl .xf-grid > li { display: grid; }
.ls-dl .xf-grid > li[hidden] { display: none; }
.ls-dl .xf-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border-radius: 22px; color: var(--ls-ink); background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); text-decoration: none; transition: box-shadow 160ms var(--ls-ease), transform 160ms var(--ls-ease); }
.ls-dl .xf-pic { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--stub, var(--ls-sand)); }
.ls-dl .xf-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ls-dl .xf-pic--print { background: none; }
.ls-dl .xf-pic--print .xp-print-art { width: 46%; height: 72%; }
.ls-dl .xf-badge { position: absolute; left: 20px; bottom: -26px; z-index: 1; display: grid; padding: 4px; border-radius: 16px; background: var(--ls-paper); box-shadow: var(--ls-shadow); }
.ls-dl .xf-badge .tud-logo { --logo-size: 56px; border-radius: 12px; }
.ls-dl .xf-body { display: grid; align-content: start; justify-items: start; gap: 2px; padding: 42px 24px 6px; }
.ls-dl .xf-saving { font-family: var(--tud-font-secondary); font-size: clamp(36px, 3.2vw, 46px); font-weight: 700; line-height: .98; letter-spacing: -0.045em; }
.ls-dl .xf-brand { margin-top: 6px; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.ls-dl .xf-deck { max-width: 40ch; margin-top: 6px; color: var(--ls-ink-2); font-size: 16px; font-weight: 500; line-height: 1.5; }
.ls-dl .xf-sign { display: contents; }
.ls-dl .xf-sign-logo { display: none; }
.ls-dl .xf-meta { display: none; color: var(--ls-soft); font-size: 14px; font-weight: 600; line-height: 1.4; }
.ls-dl .xf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ls-dl .xf-tags .xe-tag { min-height: 32px; font-size: 13px; }
.ls-dl .xf-act { justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-width: 8.8em; min-height: 44px; margin: 14px 24px 24px; padding: 0 20px; border-radius: 999px; color: var(--ls-ink); background: var(--ls-tone); box-shadow: inset 0 0 0 1.5px var(--ls-ink); font-size: 15px; font-weight: 700; }
@media (hover: hover) { .ls-dl .xf-card:hover { box-shadow: inset 0 0 0 1.5px var(--ls-ink), var(--tud-shadow-card-raised); transform: translateY(-2px); } }
.ls-dl .xf-card:focus-visible { outline: 3px solid var(--ls-ink); outline-offset: 3px; }
/* The action pill. It changes only under its own pointer: ink with paper text like .ls-btn--ink. Hovering the card
   elsewhere leaves it alone. Keyboard focus on the card fills it and rings it; a press darkens it and pushes it down a pixel. */
.ls-dl .xf-act { transition: background-color 140ms var(--ls-ease), color 140ms var(--ls-ease), box-shadow 140ms var(--ls-ease), transform 140ms var(--ls-ease); }
@media (hover: hover) {
  .ls-dl .xf-card .xf-act:hover { color: var(--ls-paper); background: var(--ls-ink); }
}
.ls-dl .xf-card:focus-visible .xf-act { color: var(--ls-paper); background: var(--ls-ink); box-shadow: 0 0 0 3px var(--ls-paper), 0 0 0 5px var(--ls-ink); }
.ls-dl .xf-card .xf-act:active { color: var(--ls-paper); background: #33302B; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35); transform: translateY(1px); }
/* Dark: the press darkens the cream fill instead, so the dark words stay readable (the light press colour gave 1.2:1). */
:root[data-theme="dark"] .ls-dl .xf-card .xf-act:active { background: #D9CFC0; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .25); }

/* A category with one or two deals: each card laid out as E's spread, the picture beside the words. */
.ls-dl .xf-grid--wide { grid-template-columns: minmax(0, 1fr); }
.ls-dl .xf-card--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr auto; }
.ls-dl .xf-card--wide .xf-pic { grid-row: 1 / 3; aspect-ratio: 4 / 3; }
.ls-dl .xf-card--wide .xf-pic--print .xp-print-art { width: 44%; height: 60%; }
.ls-dl .xf-card--wide .xf-badge { bottom: 20px; }
.ls-dl .xf-card--wide .xf-badge .tud-logo { --logo-size: 64px; border-radius: 14px; }
.ls-dl .xf-card--wide .xf-body { align-content: end; padding: 40px clamp(28px, 4vw, 56px) 0; }
.ls-dl .xf-card--wide .xf-saving { font-size: clamp(56px, 5.6vw, 88px); line-height: .92; letter-spacing: -0.05em; }
.ls-dl .xf-card--wide .xf-brand { font-size: clamp(22px, 2vw, 28px); }
.ls-dl .xf-card--wide .xf-deck { font-size: 18px; line-height: 1.55; }
.ls-dl .xf-card--wide .xf-act { align-self: start; margin: 22px clamp(28px, 4vw, 56px) 40px; min-width: 180px; justify-content: center; }
.ls-dl .xf-invite { margin-top: 24px; }

@media (max-width: 1080px) {
  .ls-dl .xf-grid:not(.xf-grid--wide) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .ls-dl .xf-issue { margin-top: 32px; }
  .ls-dl .xf-bar { margin-bottom: 16px; }
  .ls-dl .xf-chips { padding-top: 28px; }
  .ls-dl .xf-chips .dl-chips ul { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--ls-gutter) * -1); padding-inline: var(--ls-gutter); scrollbar-width: none; }
  .ls-dl .xf-chips .dl-chip { flex: none; }
  .ls-dl .xf-bar .dl-h2 { font-size: 30px; line-height: 1.1; }
  .ls-dl .xf-card--wide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .ls-dl .xf-card--wide .xf-pic { grid-row: auto; aspect-ratio: 16 / 11; }
  .ls-dl .xf-card--wide .xf-badge { bottom: -24px; }
  .ls-dl .xf-card--wide .xf-badge .tud-logo { --logo-size: 52px; border-radius: 12px; }
  .ls-dl .xf-card--wide .xf-body { padding: 40px 20px 0; }
  .ls-dl .xf-card--wide .xf-saving { font-size: 56px; }
  .ls-dl .xf-card--wide .xf-deck { font-size: 17px; }
  .ls-dl .xf-card--wide .xf-act { justify-self: stretch; min-height: 52px; margin: 20px 20px 20px; }
}
@media (max-width: 640px) {
  /* The phone card, stacked: the photo whole across the top at 16:10 (each brand's focal point), then the saving, the
     brand signed with its logo, the deal in two lines, its tags and one full-width action. The badge leaves the photo
     for the brand's line. */
  .ls-dl .xf-grid:not(.xf-grid--wide) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ls-dl .xf-card:not(.xf-card--wide) .xf-badge { display: none; }
  .ls-dl .xf-card:not(.xf-card--wide) .xf-body { padding: 12px 16px 0; }
  .ls-dl .xf-card:not(.xf-card--wide) .xf-saving { font-size: 30px; }
  .ls-dl .xf-card:not(.xf-card--wide) .xf-sign { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
  .ls-dl .xf-card:not(.xf-card--wide) .xf-sign-logo { display: block; flex: none; }
  .ls-dl .xf-card:not(.xf-card--wide) .xf-sign-logo .tud-logo { --logo-size: 32px; border-radius: 8px; box-shadow: 0 0 0 1px var(--ls-line-2); }
  .ls-dl .xf-card:not(.xf-card--wide) .xf-brand { margin-top: 0; font-size: 17px; line-height: 1.25; }
  .ls-dl .xf-card:not(.xf-card--wide) .xf-deck { display: -webkit-box; overflow: hidden; max-width: none; margin-top: 6px; font-size: 15px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ls-dl .xf-card:not(.xf-card--wide) .xf-tags { margin-top: 8px; }
  .ls-dl .xf-card:not(.xf-card--wide) .xf-tags .xe-tag { min-height: 28px; padding-right: 12px; border-radius: 14px; font-size: 13px; line-height: 1.25; }
  .ls-dl .xf-card:not(.xf-card--wide) .xf-tags .xe-tag--plain { padding: 0 12px; }
  .ls-dl .xf-card:not(.xf-card--wide) .xf-act { justify-self: stretch; justify-content: center; min-width: 0; margin: 12px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) { .ls-dl .xf-card, .ls-dl .xf-act { transition: none; } .ls-dl .xf-card:hover, .ls-dl .xf-card .xf-act:active { transform: none; } }

/* ======================= tablet and phone ======================= */
@media (max-width: 1180px) {
  .ls-dl .xd-grid { grid-template-columns: minmax(0, 1fr); }
  .ls-dl .xd-grid .xa-card { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: 1fr auto; }
  .ls-dl .xd-grid .xa-card-pic { grid-row: 1 / 3; aspect-ratio: auto; min-height: 220px; }
  .ls-dl .xd-grid .xa-card-badge { left: auto; right: -22px; bottom: 18px; }
  .ls-dl .xd-grid .xa-card-body { align-content: end; padding: 24px 24px 8px 40px; }
  .ls-dl .xd-grid .xa-card-act { margin: 10px 24px 24px 40px; }
}
@media (max-width: 1080px) {
  .ls-dl .xa-grid:not(.xd-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-dl .xb-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-dl .xc-row { grid-template-columns: minmax(180px, 240px) 64px minmax(0, 1fr) auto; gap: 18px; }
  .ls-dl .xc-pic { width: 64px; height: 64px; }
  .ls-dl .xb-store-in { grid-template-columns: 256px minmax(0, 1fr); gap: 32px; }
  .ls-dl .xb-side .dl-search-input { padding-right: 12px; font-size: 15px; }
  .ls-dl .xb-aisle { font-size: 15px; }
}
@media (max-width: 899px) {
  /* The phone pattern: the art first and centred, then the title, the lead and the actions last, full width. */
  .ls-dl .xa-hero { padding-top: 24px; }
  .ls-dl .xa-hero-in { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .ls-dl .xa-stage { display: contents; }
  .ls-dl .xa-fan { order: -1; position: relative; inset: auto; height: 188px; max-width: 360px; width: 100%; margin: 8px auto 4px; }
  .ls-dl .xa-fan-photo, .ls-dl .xa-stage--cat .xa-fan-photo { width: 32%; border-width: 4px; }
  .ls-dl .xa-fan-photo--0 { top: 12px; left: 4%; }
  .ls-dl .xa-fan-photo--1 { top: 0; right: 4%; }
  .ls-dl .xa-fan-photo--2 { top: 20px; bottom: auto; right: auto; left: 34%; width: 32%; }
  .ls-dl .xa-fan--n2 .xa-fan-photo--0, .ls-dl .xa-fan--two .xa-fan-photo--0 { left: 14%; width: 36%; }
  .ls-dl .xa-fan--n2 .xa-fan-photo--1, .ls-dl .xa-fan--two .xa-fan-photo--1 { right: 14%; width: 36%; }
  .ls-dl .xa-fan--n1 .xa-fan-photo--0, .ls-dl .xa-stage--empty .xa-fan-photo--0 { left: 50%; top: 4px; width: 40%; transform: translateX(-50%) rotate(-4deg); }
  .ls-dl .xa-stage--empty .xa-fan-photo--0 { transform: translateX(-50%); }
  .ls-dl .xa-fan--n1 .xa-fan-photo--0 .xp-print > span { transform: rotate(4deg); }
  .ls-dl .xa-fan-photo .xp-print-logo .tud-logo { --logo-size: 84px; border-radius: 16px; }
  .ls-dl .xa-stage-ticket, .ls-dl .xa-stage--cat .xa-stage-ticket { position: relative; left: auto; right: auto; bottom: auto; order: 2; margin-top: 4px; }
  .ls-dl .xa-ticket { padding: 22px 22px 24px; }
  .ls-dl .xa-ticket .ls-btn { width: 100%; }
  .ls-dl .xa-hero .dl-h1 { font-size: 44px; }
  .ls-dl .xa-hero-copy { gap: 16px; }
  .ls-dl .xa-hero .ls-crumbs { order: -1; margin-bottom: -8px; }
  .ls-dl .xa-chips { padding: 24px 0; }
  .ls-dl .xa-chips .dl-chips ul { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--ls-gutter) * -1); padding-inline: var(--ls-gutter); scrollbar-width: none; }
  .ls-dl .xa-chips .dl-chip { flex: none; }
  .ls-dl .xd-hero:not(.xa-hero--cat) { padding-bottom: 32px; }
  .ls-dl .xd-hero .xa-hero-copy { padding-bottom: 0; }

  .ls-dl .xb-hero { padding-top: 24px; }
  .ls-dl .xb-hero-in { grid-template-columns: minmax(0, 1fr); }
  .ls-dl .xb-hero-art { order: -1; min-height: 0; }
  .ls-dl .xb-model { width: 240px; }
  .ls-dl .xb-hero-doodle { width: 90px; left: 2%; }
  .ls-dl .xb-hero .dl-h1 { font-size: 44px; }
  .ls-dl .xb-store { margin-top: 28px; }
  .ls-dl .xb-store-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ls-dl .xb-side { position: static; }
  /* The aisles as a three by two grid of doodle tiles: nothing wraps to three lines. */
  .ls-dl .xb-aisles:not(.xd-aisles) ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ls-dl .xb-aisles:not(.xd-aisles) .xb-aisle { position: relative; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 4px; min-height: 104px; padding: 10px 6px 12px; text-align: center; font-size: 14px; line-height: 1.2; }
  .ls-dl .xb-aisles:not(.xd-aisles) .xb-aisle-art { width: 48px; height: 48px; }
  .ls-dl .xb-aisles:not(.xd-aisles) .xb-aisle-art .dl-line { width: 40px; height: 40px; }
  .ls-dl .xb-aisles:not(.xd-aisles) .xb-aisle-n { position: absolute; top: 6px; right: 6px; min-width: 24px; padding: 1px 6px; font-size: 12px; }
  .ls-dl .xb-shelf { overflow: visible; border-radius: 0; background: none; box-shadow: none; }
  .ls-dl .xb-shelf > .xb-rows { padding: 10px 0 0; gap: 10px; }
  .ls-dl .xb-shelf-head { border-radius: 18px; }
  .ls-dl .xb-shelf-head { grid-template-columns: 52px minmax(0, 1fr); padding: 10px 14px 6px 10px; gap: 2px 12px; }
  .ls-dl .xb-shelf-art { width: 52px; height: 52px; grid-row: span 2; }
  .ls-dl .xb-shelf-art img { width: 42px; height: 42px; }
  .ls-dl .xb-shelf-title { font-size: 22px; }
  .ls-dl .xb-shelf-link { min-height: 44px; font-size: 15px; white-space: normal; }
  .ls-dl .xb-col-art { order: -1; }
  .ls-dl .xb-col-in { display: flex; flex-direction: column; }
  .ls-dl .xb-split { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 20px; }
  .ls-dl .xb-col { position: static; border-radius: 24px; }
  .ls-dl .xb-col-in { padding: 16px 20px 28px; gap: 14px; }
  .ls-dl .xb-col .ls-crumbs { order: -2; }
  .ls-dl .xb-col-art .dl-line { width: 180px; }
  .ls-dl .xb-col .dl-h1 { font-size: 40px; }
  .ls-dl .xb-catchips .dl-chips ul { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--ls-gutter) * -1); padding-inline: var(--ls-gutter); scrollbar-width: none; }
  .ls-dl .xb-catchips .dl-chip { flex: none; }
  .ls-dl .xb-cat-deals { margin-top: 28px; }
  .ls-dl .xb-doors { gap: 12px; }
  .ls-dl .xb-doors .dl-tile { min-height: 200px; padding: 16px; }
  .ls-dl .xb-doors .dl-tile-art { width: 100%; height: 96px; margin-bottom: 12px; }
  .ls-dl .xb-doors .dl-tile-art img { max-height: 96px; }

  .ls-dl .xc-hero { padding-top: 24px; }
  .ls-dl .xc-hero-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumbs" "art" "h1" "lead"; row-gap: 16px; }
  .ls-dl .xc-hero-art { justify-self: center; }
  .ls-dl .xc-hero .dl-h1 { font-size: 52px; }
  .ls-dl .xc-hero--cat .dl-h1 { font-size: 44px; }
  .ls-dl .xc-hero-doodle { width: 150px; }
  .ls-dl .xc-hero-art--cat .dl-line { width: 180px; }
  .ls-dl .xc-boardwrap { margin-top: 32px; }
  .ls-dl .xc-board { padding: 28px 16px 20px; border-radius: 24px; }
  .ls-dl .xc-board-head { grid-template-columns: minmax(0, 1fr); }
  .ls-dl .xc-board--tone .xc-board-head { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .ls-dl .xc-board .dl-chips ul { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .ls-dl .xc-board .dl-chip { flex: none; }
  .ls-dl .xc-row { grid-template-columns: 60px minmax(0, 1fr); grid-template-areas: "saving saving" "pic text" "act act"; gap: 14px 18px; padding: 22px 4px 20px; }
  .ls-dl .xc-saving { grid-area: saving; font-size: 52px; }
  .ls-dl .xc-pic { grid-area: pic; width: 56px; height: 56px; }
  .ls-dl .xc-pic-logo { width: 30px; height: 30px; right: -8px; bottom: -8px; border-radius: 8px; }
  .ls-dl .xc-pic-logo .tud-logo { --logo-size: 30px; border-radius: 8px; }
  .ls-dl .xc-text { grid-area: text; }
  .ls-dl .xc-brand { font-size: 18px; }
  .ls-dl .xc-act { grid-area: act; min-height: 48px; width: 100%; }
  .ls-dl .xc-cat { grid-template-columns: 64px minmax(0, 1fr); gap: 4px 16px; }
  .ls-dl .xc-cat-art { width: 64px; height: 56px; grid-row: span 2; }
  .ls-dl .xc-cat-art .dl-line { width: 44px; height: 44px; }
  .ls-dl .xc-cat-name { font-size: 26px; }
  .ls-dl .xc-cat-n { font-size: 14px; }

  /* D on a phone: the aisles a strip of doodle tiles that scrolls sideways, then the shelves. */
  .ls-dl .xd-store { margin-top: 32px; }
  .ls-dl .xd-aisles ul { display: flex; gap: 8px; overflow-x: auto; margin-inline: calc(var(--ls-gutter) * -1); padding: 2px var(--ls-gutter) 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .ls-dl .xd-aisles li { flex: none; scroll-snap-align: start; }
  .ls-dl .xd-aisles .xb-aisle { position: relative; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 6px; width: 104px; min-height: 108px; padding: 10px 8px 12px; text-align: center; font-size: 14px; line-height: 1.2; }
  .ls-dl .xd-aisles .xb-aisle-art { width: 50px; height: 50px; }
  .ls-dl .xd-aisles .xb-aisle-art .dl-line { width: 42px; height: 42px; }
  .ls-dl .xd-aisles .xb-aisle-n { position: absolute; top: 6px; right: 6px; min-width: 24px; padding: 1px 6px; font-size: 12px; }
  .ls-dl .xd-side-title { margin-bottom: -4px; }
  .ls-dl .xd-shelves { gap: 20px; }
  .ls-dl .xd-shelf { border-radius: 22px; }
  .ls-dl .xd-grid { padding: 10px; gap: 10px; }
  .ls-dl .xd-cat-store { margin-top: 32px; }
  .ls-dl .xd-cat-store .xb-main { order: -1; }
  .ls-dl .xd-grid--cat { padding: 0; }
  

  .ls-dl .xe-cover { padding-top: 20px; }
  .ls-dl .xe-mast { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumbs" "stamp" "h1"; gap: 12px; }
  .ls-dl .xe-mast .dl-h1 { font-size: 48px; }
  .ls-dl .xe-stamp, .ls-dl .xe-mast-art { justify-self: center; }
  .ls-dl .xe-cover:has(.xe-cover-story) .xe-stamp { display: none; }
  .ls-dl .xe-mast-art .dl-line { width: 180px; }
  .ls-dl .xe-mast-sub { grid-template-columns: minmax(0, 1fr); margin-top: 16px; gap: 16px; }
  .ls-dl .xe-cover-story { display: grid; margin-top: 24px; }
  .ls-dl .xe-cover:has(.xe-cover-story) .ls-wrap { display: flex; flex-direction: column; }
  .ls-dl .xe-cover:has(.xe-cover-story) .xe-cover-story { display: contents; }
  .ls-dl .xe-cover:has(.xe-cover-story) .xe-cover-pic { order: -1; margin-bottom: 20px; aspect-ratio: 4 / 3; border-radius: 22px; }
  .ls-dl .xe-cover:has(.xe-cover-story) .ls-crumbs { order: -2; }
  .ls-dl .xe-cover-line { position: relative; left: auto; bottom: auto; width: auto; margin-top: 24px; padding: 22px 22px 24px; }
  .ls-dl .xe-cover-line .ls-btn { width: 100%; }
  .ls-dl .xe-bar { padding-top: 0; }
  .ls-dl .xe-bar .dl-chips ul { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--ls-gutter) * -1); padding-inline: var(--ls-gutter); scrollbar-width: none; }
  .ls-dl .xe-bar .dl-chip, .ls-dl .xe-chips .dl-chip { flex: none; }
  .ls-dl .xe-chips .dl-chips ul { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--ls-gutter) * -1); padding-inline: var(--ls-gutter); scrollbar-width: none; }
  .ls-dl .xe-spread, .ls-dl .xe-spread--flip { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pic" "copy"; gap: 34px; padding: 32px 0 36px; }
  .ls-dl .xe-pic { border-radius: 20px; }
  .ls-dl .xe-pic > img, .ls-dl .xe-pic > .xp-print { border-radius: 20px; }
  .ls-dl .xe-pic-logo .tud-logo { --logo-size: 52px; border-radius: 12px; }
  .ls-dl .xe-saving { font-size: 64px; }
  .ls-dl .xe-deck { font-size: 17px; }
  .ls-dl .xe-act { width: 100%; min-height: 52px; }
  .ls-dl .xe-essay-cols { columns: 1; }

  .ls-dl .xp-empty { padding: 32px 20px 24px; }
  .ls-dl .xp-empty .dl-empty-actions { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; width: 100%; }
  .ls-dl .xp-empty .dl-empty-actions .ls-btn { width: 100%; }
}
@media (max-width: 640px) {
  .ls-dl .xa-grid, .ls-dl .xa-grid:not(.xd-grid) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ls-dl .xa-card, .ls-dl .xd-grid .xa-card, .ls-dl .xd-shelf--one .xa-card { grid-template-columns: 128px minmax(0, 1fr); grid-template-rows: auto auto; }
  .ls-dl .xa-card-pic, .ls-dl .xd-grid .xa-card-pic, .ls-dl .xd-shelf--one .xa-card-pic { grid-row: span 2; aspect-ratio: auto; height: 100%; min-height: 164px; }
  .ls-dl .xa-card-badge, .ls-dl .xd-grid .xa-card-badge, .ls-dl .xd-shelf--one .xa-card-badge { left: auto; right: -14px; bottom: 10px; padding: 3px; border-radius: 12px; }
  .ls-dl .xa-card-badge .tud-logo { --logo-size: 40px; border-radius: 9px; }
  .ls-dl .xa-card-pic--print .xp-print-art { width: 64%; height: 64%; }
  .ls-dl .xa-card-body, .ls-dl .xd-grid .xa-card-body, .ls-dl .xd-shelf--one .xa-card-body { align-content: start; padding: 16px 14px 4px 26px; }
  .ls-dl .xa-card-saving, .ls-dl .xd-grid .xa-card-saving { font-size: 28px; }
  .ls-dl .xa-card-brand { font-size: 16px; }
  .ls-dl .xa-card-meta { font-size: 14px; }
  .ls-dl .xa-card-act, .ls-dl .xd-grid .xa-card-act, .ls-dl .xd-shelf--one .xa-card-act { margin: 8px 14px 14px 26px; padding: 0 16px; font-size: 14px; }
  .ls-dl .xa-invite-li .dl-invite { flex-direction: row; text-align: left; }
  .ls-dl .xd-grid .xa-card { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .ls-dl .xa-card, .ls-dl .xb-aisle, .ls-dl .xc-row, .ls-dl .xc-cat { transition: none; } .ls-dl .xa-card:hover { transform: none; } }

/* F's thin masthead on phones (after E's phone rules): crumbs, then the art small and first, the title, the lead, a full-width search. */
@media (max-width: 899px) {
  .ls-dl .xf-page .xe-cover, .ls-dl .xe-cover:has(.xf-art) { padding-top: 20px; }
  .ls-dl .xf-art { justify-self: start; width: 112px; }
  .ls-dl .xe-mast:has(.xf-art) { gap: 16px; }
  .ls-dl .xe-mast-sub .dl-search { width: 100%; }
}

/* ======================= F: the hero ground and its sky ======================= */
/* The hub hero sits on the warm peach band; a category's on its own tone. The band runs full bleed and ends above the bar. */
.ls-dl .xe-cover.xf-cover { position: relative; overflow: hidden; padding: 72px 0 52px; background: var(--ls-tile, var(--ls-sand)); }
.ls-dl .xf-cover > .ls-wrap { position: relative; z-index: 1; }
.ls-dl .xf-cover .ls-crumbs a, .ls-dl .xf-cover .ls-crumbs li { color: var(--ls-ink-2); }
.ls-dl .xf-cover .ls-crumbs a { text-decoration-color: currentColor; }
.ls-dl .xf-cover .ls-crumbs li + li::before { border-color: var(--ls-ink-2); }
/* The discs keep their pop on the band: the hub's orange sticker gets a paper edge, a category's doodle sits on paper. */
.ls-dl .xf-cover .xf-art--hub { box-shadow: 0 0 0 6px var(--ls-paper); }
.ls-dl .xf-cover[class*="ls-tile--"] .xf-art { background: var(--ls-paper); }

/* The sky: faint ink doodles and stars, never under the title, the lead or the search (they keep to the strip above the
   title, the page margins either side of the column and the strip under the lead). Transform and opacity motion only.
   Quiet in both themes: a touch stronger in dark, where light ink on the dark band reads fainter. */
.ls-dl .xf-sky { position: absolute; inset: 0; z-index: 0; color: var(--ls-ink); opacity: .24; pointer-events: none; }
:root[data-theme="dark"] .ls-dl .xf-sky { opacity: .4; }
.ls-dl .xf-sky svg { display: block; overflow: visible; }
.ls-dl .xf-sky-i { position: absolute; width: 44px; height: 44px; }
.ls-dl .xf-stars, .ls-dl .xf-phone { position: absolute; inset: 0; }
.ls-dl .xf-star { margin-left: -9px; }
.ls-dl .xf-star--s { width: 14px; height: 14px; }
.ls-dl .xf-star--m { width: 20px; height: 20px; }
.ls-dl .xf-star--l { width: 28px; height: 28px; }
.ls-dl .xf-sky .xf-cloud { top: 10px; left: 74%; width: 52px; height: 52px; }
.ls-dl .xf-phone { display: none; }
.ls-dl .xf-gutter { position: absolute; top: 0; bottom: 0; display: none; width: calc((100% - var(--ls-max)) / 2); }
.ls-dl .xf-gutter--l { left: 0; }
.ls-dl .xf-gutter--r { right: 0; }
.ls-dl .xf-bob--a { bottom: 18px; left: calc(50% - 26px); width: 52px; height: 52px; }
.ls-dl .xf-bob--b { top: 64px; left: calc(50% - 40px); }
.ls-dl .xf-bob--c { bottom: 22px; left: calc(50% - 4px); width: 56px; height: 56px; animation-delay: -11s; }
.ls-dl .xf-bob--d { top: 84px; left: calc(50% - 18px); width: 40px; height: 40px; animation-delay: -6s; }
.ls-dl .xf-bob--e { top: 196px; left: calc(50% - 30px); width: 40px; height: 40px; animation-delay: -16s; }
/* The pencil mid-write, tip down to the lower left (the founder's ask; the one tilted doodle). It bobs around that angle. */
.ls-dl .xf-sky .xf-bob--e { rotate: -35deg; }
/* A category's sky flies its own doodles, every one of them untilted: the angled pencil is the hub's alone. */
.ls-dl .xf-sky--cat .xf-bob--e { rotate: none; }
.ls-dl .xf-bob--f { top: 150px; left: calc(50% + 4px); width: 40px; height: 40px; animation-delay: -4s; }
.ls-dl .xf-twinkle--a { top: 250px; left: calc(50% - 30px); width: 24px; height: 24px; }
.ls-dl .xf-bob { animation: xf-bob 24s ease-in-out infinite; }
.ls-dl .xf-drift { animation: xf-drift 34s ease-in-out infinite; }
/* A few stars twinkle, slowly and out of step; the rest hold still. */
.ls-dl .xf-twinkle { animation: xf-twinkle 4.6s ease-in-out infinite; }
.ls-dl .xf-star-4 { animation-duration: 5.4s; animation-delay: -1.2s; }
.ls-dl .xf-star-9 { animation-duration: 3.8s; animation-delay: -2.6s; }
.ls-dl .xf-star-11 { animation-duration: 6s; animation-delay: -.6s; }
.ls-dl .xf-twinkle--a { animation-duration: 5s; animation-delay: -3.4s; }
@keyframes xf-bob { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(6px, -10px); } 50% { transform: translate(0, -4px); } 75% { transform: translate(-6px, -12px); } }
@keyframes xf-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-36px, 4px); } }
@keyframes xf-twinkle { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
@media (min-width: 1360px) { .ls-dl .xf-gutter { display: block; } }

/* Wide screens: one column of copy (the title sized so its first line fills the column, the lead, the search) with
   the disc beside the whole stack, so the title runs up to the art and no empty block opens between them. */
.ls-dl .xf-cover { --xf-disc: clamp(240px, 22vw, 330px); }
@media (min-width: 900px) {
  .ls-dl .xf-cover > .ls-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "crumbs art" "h1 art" "lead art" "search art"; column-gap: 56px; align-items: start; }
  .ls-dl .xf-cover .xe-mast, .ls-dl .xf-cover .xe-mast-sub { display: contents; }
  .ls-dl .xf-cover .ls-crumbs { grid-area: crumbs; margin-bottom: 12px; }
  .ls-dl .xf-cover .xe-mast .dl-h1 { grid-area: h1; max-width: none; font-size: min(100px, calc((min(100vw, 1168px) - 104px - var(--xf-disc)) / 7.6)); }
  /* The lead and the search run the full width of the title, so the copy is one block with no gap before the disc;
     the lead steps up to 20 px to keep its lines near 70 characters at that width. */
  .ls-dl .xf-cover .xe-mast-sub > .dl-lead { grid-area: lead; max-width: none; margin-top: 24px; font-size: 20px; line-height: 1.55; }
  .ls-dl .xf-cover .xe-mast-sub > .dl-search { grid-area: search; width: 100%; max-width: none; margin-top: 24px; }
  .ls-dl .xf-cover .xf-art { grid-area: art; align-self: center; justify-self: end; width: var(--xf-disc); }
}

/* The founder's paper plane (public/assets/paper-plane.js), in its own layer under the disc: an orange paper plane,
   its underside a shade deeper, inked like the doodles, trailing a dashed ink line.
   The layer has the disc cut out of it, so the plane slips behind the disc as it crosses. */
.ls-dl .xf-planes { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  --hole: radial-gradient(circle at var(--hole-x, -9999px) var(--hole-y, -9999px), transparent var(--hole-r, 0px), #000 calc(var(--hole-r, 0px) * 1.2));
  -webkit-mask-image: var(--hole); mask-image: var(--hole); }
.ls-dl .paper-plane { position: absolute; left: 0; top: 0; width: 32px; height: 20px; overflow: visible; transform-origin: 16px 10px; fill: var(--ls-orange); stroke: var(--ls-ink); stroke-width: .8; stroke-linejoin: round; will-change: transform; pointer-events: none; }
.ls-dl .paper-plane path:first-child { fill: color-mix(in oklab, var(--ls-orange) 70%, var(--ls-ink)); }
.ls-dl .paper-plane-trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: color-mix(in srgb, var(--ls-ink) 55%, transparent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 9; pointer-events: none; }

@media (max-width: 899px) {
  .ls-dl .xe-cover.xf-cover { padding: 20px 0 40px; }
  /* Phones (founder, 24 Oct): the page's own six gutter doodles and their sparkle, as wide screens fly them, scattered
     (no rows, no columns, mixed sizes) over the ground right of the art and the strip above it right of the breadcrumb,
     each at a fixed share of that ground (from 144px to 16px short of the edge), so the scatter holds at every width;
     stars fill the gaps between them. The hub adds its cloud and a star above the art, where a category has its
     breadcrumb. Under the search, a loose zigzag of small stars, short enough for the 40px strip. Every spot keeps clear of the breadcrumb, the art, the title and the edge. */
  .ls-dl .xf-sky .xf-cloud { display: none; }
  .ls-dl .xf-gutter { display: block; left: 0; right: 0; width: auto; }
  .ls-dl .xf-phone { display: block; }
  .ls-dl .xf-sky .xf-bob--a { top: 147px; bottom: auto; left: calc(144px + (100% - 206px) * .474); width: 46px; height: 46px; }
  .ls-dl .xf-sky .xf-bob--b { top: 101px; left: calc(144px + (100% - 200px) * .019); width: 40px; height: 40px; }
  .ls-dl .xf-sky .xf-bob--c { top: 10px; bottom: auto; left: calc(144px + (100% - 208px) * .612); width: 48px; height: 48px; }
  .ls-dl .xf-sky .xf-bob--d { top: 62px; left: calc(144px + (100% - 196px) * .982); width: 36px; height: 36px; }
  .ls-dl .xf-sky .xf-bob--e { top: 85px; left: calc(144px + (100% - 198px) * .389); width: 38px; height: 38px; }
  .ls-dl .xf-sky .xf-bob--f { top: 121px; left: calc(144px + (100% - 198px) * .907); width: 38px; height: 38px; }
  .ls-dl .xf-sky .xf-twinkle--a { top: 12px; left: calc(144px + (100% - 182px) * .983); width: 22px; height: 22px; }
  .ls-dl .xf-sky .xf-star--phone { top: 76px; bottom: auto; left: calc(144px + (100% - 176px) * .641); width: 16px; height: 16px; animation-delay: -2s; }
  .ls-dl .xf-sky .xf-cloud--phone { top: 18px; left: calc(120px + (100% - 390px) * .3); width: 44px; height: 44px; }
  /* A category's phone doodle is one of its six, which now fly here too, so it stays out. */
  .ls-dl .xf-sky .xf-doodle--phone { display: none; }
  .ls-dl .xf-sky .xf-stars > :not(.xf-star-8):not(.xf-star-9):not(.xf-star-11) { display: none; }
  .ls-dl .xf-sky:not(.xf-sky--cat) .xf-stars > .xf-star.xf-star-1 { display: block; width: 16px; height: 16px; }
  .ls-dl .xf-sky .xf-star-8 { width: 14px; height: 14px; translate: 12px 0; }
  .ls-dl .xf-sky .xf-star-9 { width: 20px; height: 20px; translate: 14px 10px; }
  .ls-dl .xf-sky .xf-star-11 { width: 16px; height: 16px; translate: 0 -6px; }
  .ls-dl .xf-sky .xf-twinkle--phone { bottom: 8px; left: 6%; width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-dl .xf-sky * { animation: none !important; }
}



/* F as one page (22 Oct 2026): a chip swaps the hero in place, and the ground eases to the category's tone. */
.ls-dl .xe-cover.xf-cover { transition: background-color .32s var(--ls-ease); }
@media (prefers-reduced-motion: reduce) { .ls-dl .xe-cover.xf-cover { transition: none; } }
/* Seven chips (All deals and six categories) sit on one line at desktop width: a little tighter than the five were. */
@media (min-width: 1100px) {
  .ls-dl .xf-bar .dl-chips ul { gap: 6px; }
}
/* The chips (founder, 22 Oct): the count is a round badge set in from the chip's end by the same space as above and below
   it, so the two curves run parallel; the doodle sits the same distance in from the start. */
.ls-dl .xf-bar .dl-chip { gap: 6px; min-height: 44px; padding: 0 11px 0 8px; font-size: 14px; }
.ls-dl .xf-bar .dl-chip--all { padding-left: 16px; }
.ls-dl .xf-bar .dl-chip-art { width: 28px; height: 28px; }
.ls-dl .xf-bar .dl-chip-n { display: inline-grid; place-items: center; box-sizing: border-box; min-width: 22px; height: 22px; margin-left: 2px; padding: 0 6px; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; }

/* Every hero is one height (founder, 22 Oct): the hub keeps the breadcrumb's row empty, so its title sits where a category's
   does, and on phones the band is as tall as the tallest category's. A chip swap no longer moves the page.
   That height is the tallest title's now the lead is gone (24 Oct): 316px of crumbs, art, search and padding plus
   44px a title line; "Sports and fitness student discounts" takes three lines under 396px, two from there. */
.ls-dl .xf-cover .xe-mast:not(:has(.ls-crumbs))::before { content: ''; display: block; height: 44px; }
@media (min-width: 900px) { .ls-dl .xf-cover .xe-mast:not(:has(.ls-crumbs))::before { grid-area: crumbs; margin-bottom: 12px; } }
@media (max-width: 899px) {
  .ls-dl .xe-cover.xf-cover { padding-top: 20px; min-height: 448px; }
  .ls-dl .xf-cover .xe-mast:not(:has(.ls-crumbs))::before { order: -1; }
}
@media (min-width: 396px) and (max-width: 899px) { .ls-dl .xe-cover.xf-cover { min-height: 404px; } }
@media (max-width: 339px) { .ls-dl .xe-cover.xf-cover { min-height: 492px; } }