body { font-family: 'Inter', sans-serif; color: #241C15; } .font-amiri { font-family: 'Amiri', serif; } .font-instrument { font-family: 'Instrument Serif', serif; } /* Direction-aware utility: keeps Latin fragments (wordmark, prices) LTR inside an RTL document without breaking their internal shaping / [dir="rtl"] .ltr-fragment { direction: ltr; unicode-bidi: isolate; } / ---- Signature element: the market "ticket" card ---- A torn-corner notch on each product card, like a price tag punched onto a stall sign. This is the one place the design spends its boldness; everything else stays plain. */ .ticket-card { position: relative; background: #FFFDF8; border: 1px solid rgba(36, 28, 21, 0.08); border-radius: 14px; padding: 20px; box-shadow: 0 2px 8px rgba(36, 28, 21, 0.05); transition: box-shadow 0.3s ease, transform 0.3s ease; } .ticket-card:hover { box-shadow: 0 10px 24px rgba(36, 28, 21, 0.12); transform: translateY(-3px); } .ticket-notch { position: absolute; top: 28px; width: 16px; height: 16px; background: #F7F1E6; border-radius: 50%; z-index: 1; } .ticket-notch-r { right: -8px; box-shadow: inset 2px 0 3px rgba(36, 28, 21, 0.06); } .ticket-notch-l { left: -8px; box-shadow: inset -2px 0 3px rgba(36, 28, 21, 0.06); } @media (prefers-reduced-motion: reduce) { .ticket-card, .ticket-card img { transition: none !important; } }