:root {
  --plum: #3A0A30;
  --plum-2: #5A1250;
  --plum-3: #7A1F6B;
  --kumkum: #B0213F;
  --marigold: #F6B91E;
  --zari: #E5BC66;
  --zari-deep: #83560C;
  --cream: #FBF3E3;
  --silk: #FFFAF0;
  --line: #E8D9BD;
  --ink: #2C0E26;
  --teal: #0F6E73;
  --leaf: #1F6B45;
  --muted: #6E5766;
  --gutter: 16px;
  --display: "Bodoni Moda", Didot, "Bodoni MT", Georgia, "Times New Roman", serif;
  --body: "Anek Tamil", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'%3E%3Cpath d='M0 400V150C0 90 60 60 110 40 130 30 145 15 150 0c5 15 20 30 40 40 50 20 110 50 110 110v250z'/%3E%3C/svg%3E");
  --butta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cpath id='b' d='M9 0C6 2 0 6 0 12a6 6 0 0 0 12 0C12 7 8 6 8 3c0-1 .4-2 1-3z'/%3E%3C/defs%3E%3Cg fill='%23E5BC66' fill-opacity='.055'%3E%3Cuse href='%23b' x='10' y='8'/%3E%3Cuse href='%23b' x='42' y='40'/%3E%3C/g%3E%3C/svg%3E");
  --vine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1736 308'%3E%3Cg fill='%23E5BC66'%3E%3Cg id='v' transform='translate(0 308) scale(1 -1)'%3E%3Cpath d='M838 306 c-1 -1 -1 -7 -1 -13 1 -19 -11 -27 -20 -13 -9 16 -20 22 -26 16 -4 -4 -4 -5 3 -23 2 -6 3 -11 4 -22 0 -2 0 -3 -3 -5 -5 -3 -6 -5 -2 -16 0 -2 1 -5 1 -7 0 -2 1 -4 2 -6 6 -7 2 -9 -11 -5 -34 12 -37 -4 -6 -35 7 -7 6 -10 -1 -10 -17 0 -26 -19 -12 -26 3 -1 6 -4 9 -6 3 -3 5 -4 8 -4 2 0 5 -1 7 -2 17 -11 32 -12 32 -4 0 1 1 3 3 4 7 8 -4 12 -20 7 -3 -1 -7 0 -7 2 1 2 3 2 7 1 3 -1 3 -1 6 3 2 4 2 4 8 4 10 -1 17 4 12 8 -2 2 -3 2 -11 2 -10 -1 -13 0 -13 6 0 2 -1 4 -5 7 -10 8 -7 17 4 17 1 0 5 1 7 3 8 4 18 5 24 1 11 -5 10 7 -1 13 -9 5 -12 9 -7 12 5 2 5 4 5 12 1 8 1 8 4 8 2 0 4 1 5 2 3 2 5 1 8 -1 7 -7 15 2 12 14 -2 7 -1 10 3 10 3 -1 3 21 0 27 -2 2 -3 5 -3 8 0 10 -4 13 -15 13 -9 0 -10 0 -10 -2z m-49 -109 c2 -2 0 -9 -4 -9 -1 0 -4 5 -4 7 0 3 5 5 8 2z M12 299 c-7 -6 -9 -10 -10 -20 0 -5 -1 -9 -1 -10 -2 -1 -1 -23 1 -25 1 -1 1 -4 1 -9 1 -3 1 -7 2 -9 1 -3 1 -10 0 -10 -5 2 -5 4 -5 -17 0 -21 0 -22 5 -18 3 2 5 20 2 26 -2 7 -2 8 3 8 2 0 4 1 6 2 3 2 3 2 7 1 7 -3 12 1 12 9 0 5 -2 6 -7 6 -6 -1 -7 0 -7 10 0 9 -3 13 -10 13 -6 0 -7 3 -3 6 5 4 7 5 12 3 9 -4 13 6 8 22 0 2 -1 5 -2 8 -2 9 -7 10 -14 4z M290 293 c-4 -4 -8 -7 -12 -9 -11 -5 -13 -10 -10 -19 3 -6 4 -8 1 -10 -4 -4 -8 -3 -8 2 0 4 -1 6 -4 6 -1 0 -3 1 -4 3 -4 3 -6 4 -13 1 -3 0 -7 -1 -8 -1 -2 0 -5 -2 -10 -7 -3 -3 -8 -8 -10 -9 -3 -2 -4 -5 -6 -10 -3 -7 -13 -21 -14 -21 -1 0 -2 3 -2 5 -2 7 -8 5 -24 -9 -26 -25 -34 -42 -26 -58 4 -7 4 -8 -8 -18 -14 -13 -16 -22 -4 -20 5 0 7 -1 9 -6 0 -4 7 -9 13 -11 2 -1 6 -2 8 -2 5 -1 23 -1 27 0 1 1 8 1 16 1 18 0 20 1 17 10 -3 10 -16 20 -27 22 -3 0 -6 1 -7 2 -1 2 -4 2 -8 2 -13 0 -6 11 10 15 3 1 8 3 12 5 8 3 23 4 23 1 0 -1 -14 -7 -17 -7 -10 0 -10 -13 0 -16 3 -1 6 -3 8 -5 2 -2 4 -3 13 -4 5 -1 11 -2 13 -3 4 -1 22 -4 29 -4 18 0 -1 26 -22 31 -6 1 -21 7 -21 8 0 5 18 6 25 2 4 -1 8 -2 13 -3 7 0 10 -2 11 -7 1 -1 3 -3 6 -5 7 -4 10 -7 10 -11 0 -6 5 -17 8 -19 4 -1 4 -3 3 -10 -1 -4 -1 -6 1 -10 5 -19 -1 -30 -20 -42 -3 -2 -7 -4 -8 -5 -3 -2 -3 -2 -8 -1 -3 0 -9 1 -14 1 -9 0 -8 -1 -14 9 -4 6 -5 9 -6 18 -1 22 -16 14 -16 -10 0 -5 -1 -9 -2 -11 -1 -4 -1 -5 4 -13 2 -3 5 -7 7 -10 5 -8 15 -15 27 -19 6 -2 7 -3 7 -8 0 -4 0 -4 5 -4 4 0 4 0 4 5 -1 5 4 9 15 10 5 0 6 1 13 8 9 8 10 8 15 3 11 -12 26 -2 17 10 -2 4 -4 5 -12 3 -3 -1 -2 3 1 6 3 3 3 3 8 1 20 -7 29 0 24 17 -1 6 -1 6 2 9 6 5 7 10 6 14 -4 9 -17 5 -18 -6 -1 -11 -19 -20 -19 -10 0 2 -1 6 -1 9 -1 2 -2 6 -2 8 0 6 -2 14 -5 19 -2 2 -3 6 -4 9 -2 9 -17 30 -22 30 -1 0 -7 7 -7 9 1 2 4 2 11 1 3 -1 8 -2 9 -2 4 0 9 -3 13 -6 1 -2 5 -4 7 -5 3 -2 7 -4 9 -8 3 -4 5 -5 9 -6 6 -2 7 -3 7 -7 0 -2 9 -14 13 -16 3 -1 8 -9 11 -15 9 -17 9 -17 8 -21 -1 -4 -1 -5 1 -8 2 -5 1 -7 -2 -7 -2 0 -12 -11 -15 -17 -2 -3 -5 -8 -8 -12 -7 -8 -10 -17 -7 -23 2 -4 14 -3 16 1 5 7 9 7 9 0 0 -5 20 -5 22 0 3 7 6 8 9 2 4 -7 13 -7 18 -1 5 7 5 10 1 16 -6 8 -5 11 2 7 14 -9 30 6 20 19 -2 2 -4 5 -4 5 0 2 2 5 6 7 20 10 11 30 -9 20 -5 -2 -6 -3 -8 -2 -6 2 -17 1 -27 -4 -7 -3 -8 -2 -16 11 -2 3 -5 7 -6 9 -2 2 -3 4 -4 6 0 2 -2 5 -5 7 -4 3 -6 6 -8 10 -2 5 -3 5 -9 8 -10 5 -11 19 0 15 11 -5 21 6 14 15 -4 6 -7 5 -17 -5 -9 -9 -13 -9 -25 1 -9 8 -31 16 -37 14 -6 -2 -5 -3 -10 2 -2 2 -5 4 -6 4 -1 0 -3 1 -4 2 -2 1 -2 1 -5 0 -4 -2 -9 -2 -13 0 -4 2 -21 2 -27 -1 -2 0 -6 -1 -10 -1 -12 0 -24 -4 -31 -10 -2 -2 -5 -4 -8 -5 -14 -7 -6 12 10 24 5 4 12 9 16 13 3 3 6 6 7 6 1 0 4 2 7 5 6 6 8 6 7 -1 0 -10 13 -20 30 -21 3 -1 7 -2 10 -4 4 -2 5 -2 7 -1 12 4 15 4 20 4 5 -1 7 0 11 2 5 2 6 2 11 1 16 -2 20 1 10 7 -5 3 -6 5 -5 8 2 4 12 5 19 2 3 -1 7 -2 9 -2 2 0 6 -1 10 -3 14 -7 23 7 12 17 -3 3 -6 7 -8 9 -6 9 -23 19 -31 19 -3 0 -6 1 -9 4 -3 1 -6 3 -7 3 -5 0 -16 -3 -19 -5 -3 -2 -8 -3 -10 -1 -4 3 3 10 9 9 2 -1 6 0 13 3 6 3 13 5 14 5 2 0 7 1 11 1 12 3 20 3 25 2 2 -1 6 -2 8 -2 6 0 5 -2 -1 -3 -6 0 -9 -3 -7 -8 0 -2 1 -5 1 -7 0 -7 4 -13 11 -13 3 0 4 -1 7 -4 2 -2 5 -4 6 -4 1 0 4 -1 6 -2 2 -1 5 -2 8 -2 2 -1 5 -2 7 -3 5 -4 11 -6 16 -6 6 1 9 0 13 -4 5 -6 12 -3 12 4 0 6 3 8 7 4 3 -2 3 -3 3 -13 1 -6 1 -14 2 -17 4 -20 -16 -42 -34 -38 -17 4 -16 3 -21 14 -7 15 -9 16 -14 8 -4 -6 -4 -12 0 -20 4 -12 4 -15 -2 -17 -4 -1 -7 -4 -7 -7 0 -5 8 -5 16 -1 6 4 8 4 11 1 3 -3 7 -4 11 -1 3 1 7 1 7 -1 0 -5 9 -3 12 2 2 4 2 4 7 3 3 0 5 0 7 2 4 3 6 3 9 -1 10 -10 23 3 23 22 -1 12 -2 13 -9 5 -8 -9 -13 -9 -8 0 2 5 2 6 1 11 0 3 0 11 0 18 0 14 -2 23 -7 28 -2 3 -2 5 0 5 2 0 19 -17 20 -20 1 -2 3 -7 5 -11 4 -8 4 -9 5 -18 1 -9 1 -12 5 -21 6 -17 8 -20 14 -21 12 -3 22 -25 18 -38 -2 -5 -1 -12 3 -19 3 -8 3 -9 -4 -8 -5 2 -8 5 -8 7 0 1 -1 5 -2 9 -2 6 -3 7 -1 10 1 3 1 5 0 7 -1 1 -1 5 -1 9 2 9 -5 15 -10 8 -2 -2 -2 -3 -1 -9 0 -4 0 -6 -1 -9 -2 -2 -2 -5 -1 -17 1 -16 1 -16 -4 -17 -16 -4 -20 -33 -8 -53 2 -3 27 -3 30 1 1 1 4 3 7 4 3 2 5 4 6 6 1 2 2 6 4 9 1 2 2 6 3 9 1 2 2 4 3 4 2 1 11 -8 12 -13 2 -7 6 -9 11 -5 3 3 4 3 9 -1 8 -6 12 -4 16 3 2 5 2 5 0 13 -2 8 -2 11 2 7 3 -2 5 -11 5 -18 0 -10 11 -16 16 -9 5 5 5 7 0 15 -3 8 -3 8 -1 10 5 4 13 1 12 -4 -5 -20 8 -34 19 -21 6 7 6 8 4 15 -3 9 -1 14 5 14 1 0 5 1 8 3 3 2 11 5 18 8 11 3 12 4 13 7 1 3 4 5 8 8 6 4 22 20 26 26 2 4 4 5 11 14 2 3 3 5 3 8 0 2 2 7 5 14 2 5 5 11 5 13 1 1 3 6 4 10 10 21 7 88 -3 88 -2 0 -6 -5 -7 -9 0 -2 -3 -6 -4 -9 -2 -3 -4 -6 -4 -7 0 -4 -3 -12 -6 -15 -1 -1 -2 -3 -2 -4 0 -2 -8 -14 -12 -20 -5 -7 -8 -11 -9 -17 -1 -3 -2 -9 -3 -13 -2 -6 -2 -10 -2 -14 2 -13 -5 -11 -8 3 0 6 -2 10 -7 17 -4 6 -3 9 4 9 7 0 9 8 5 17 -5 11 -3 17 6 22 8 4 7 9 -1 14 -9 4 -10 10 -4 19 2 3 3 6 4 8 1 5 3 5 9 0 9 -8 14 -6 23 7 7 11 6 15 -5 22 -12 9 -27 -1 -27 -18 0 -4 0 -4 -7 -3 -6 0 -7 0 -12 -3 -7 -3 -8 -3 -5 4 8 18 -1 29 -16 18 -5 -3 -6 -2 -8 2 -5 11 -15 12 -19 3 -1 -3 -1 -3 1 -7 4 -4 4 -5 0 -11 -2 -5 -3 -8 -1 -14 1 -3 2 -7 2 -13 -1 -8 4 -16 9 -16 3 0 5 -1 5 -3 0 -2 -1 -2 -5 -1 -3 1 -3 1 -7 -3 -3 -3 -9 -6 -16 -10 -6 -2 -13 -7 -16 -9 -17 -14 -60 -12 -74 4 -1 1 -5 3 -8 5 -3 1 -8 5 -11 8 -3 3 -8 7 -12 9 -5 3 -15 12 -15 14 0 2 3 3 6 3 1 -1 4 -1 6 -2 1 0 5 0 7 1 13 5 27 -1 16 -6 -13 -7 -12 -16 1 -16 4 0 9 -1 11 -1 12 -3 11 -3 22 5 20 13 26 20 20 25 -3 3 -23 1 -33 -4 -3 -1 -4 -1 -5 0 -2 1 0 4 5 6 6 3 16 13 17 18 1 3 2 6 2 7 3 8 -4 10 -17 5 -3 -1 -6 -1 -9 -1 -4 1 -6 1 -9 -1 -2 -1 -5 -2 -7 -2 -7 0 -16 -3 -29 -11 -3 -2 -4 -2 -5 -1 -2 1 0 4 6 6 5 3 10 9 13 16 2 8 -1 11 -12 8 -2 0 -9 -1 -15 -2 -15 0 -28 -3 -33 -7 -7 -5 -9 -2 -2 5 6 8 3 11 -8 9 -4 -1 -8 -1 -10 -1 -1 1 -3 1 -5 2 -6 1 -18 -5 -18 -10 0 -5 14 -11 23 -11 6 1 6 1 8 -3 4 -8 0 -9 -10 -3 -4 1 -8 3 -10 3 -1 0 -4 1 -6 2 -4 2 -6 3 -12 3 -8 0 -20 3 -18 6 1 0 3 1 5 1 11 0 20 13 14 18 -5 5 -25 3 -34 -3 -6 -4 -8 -4 -9 0 -1 7 -10 7 -22 1 -14 -7 -19 -8 -19 -1 2 9 -4 11 -12 3z m55 -11 c1 -1 3 -2 6 -3 8 -3 0 -8 -10 -6 -8 1 -9 3 -4 7 3 3 6 4 8 2z m-46 -8 c4 -3 6 -8 6 -10 -1 -2 -16 -2 -18 1 -3 2 3 11 8 11 1 0 3 -1 4 -2z m81 -18 c3 -1 2 -3 0 -3 -3 0 -5 2 -5 3 1 1 3 1 5 0z m-126 -5 c4 -4 1 -9 -5 -9 -4 0 -5 2 -4 6 2 5 6 6 9 3z m215 -2 c2 -2 -2 -10 -6 -11 -8 -2 -22 8 -16 12 2 1 20 0 22 -1z m-40 -12 c9 -9 11 -12 9 -15 -3 -2 -6 0 -8 5 -2 3 -4 5 -8 8 -7 4 -9 6 -8 8 2 4 6 2 15 -6z m-121 -11 c0 -1 -1 -2 -2 -2 -3 -1 -6 0 -6 1 0 4 7 5 8 1z m-37 0 c2 -2 0 -6 -5 -8 -10 -4 -14 2 -4 7 6 3 7 3 9 1z m-26 -7 c2 -2 1 -5 -5 -11 -7 -7 -8 -7 -11 -1 -2 4 -1 6 1 8 5 5 11 6 15 4z m-53 -10 c0 -3 0 -4 -3 -8 -4 -5 -7 -3 -3 3 2 5 3 6 5 6 0 0 1 -1 1 -1z m297 -10 c2 -1 5 -2 6 -2 2 -1 6 -3 9 -7 3 -3 7 -5 7 -5 1 0 3 -2 5 -4 7 -6 4 -11 -5 -8 -4 1 -3 2 -11 -4 -3 -2 -7 3 -10 16 -1 2 -3 6 -5 8 -6 7 -4 10 4 6z m152 -8 c1 -1 4 -4 7 -7 9 -10 9 -15 0 -15 -7 0 -31 -18 -33 -26 -4 -14 -3 -28 1 -28 3 0 6 5 7 9 2 13 18 23 28 18 17 -9 24 -19 20 -29 -1 -2 -2 -7 -3 -10 -1 -10 -20 -36 -24 -32 -4 5 -2 18 4 24 3 3 5 6 5 7 0 2 -3 2 -6 -1 -4 -2 -6 -3 -10 0 -6 3 -10 0 -8 -6 2 -4 2 -5 -2 -10 -2 -3 -5 -8 -7 -12 -2 -4 -5 -9 -6 -10 -1 -1 -2 -4 -3 -6 -4 -7 -11 -9 -17 -5 -3 2 -7 3 -10 4 -8 2 -9 2 -16 8 -3 2 -8 5 -11 6 -6 3 -15 11 -17 17 -1 2 -5 6 -8 10 -3 3 -6 7 -6 7 0 1 -1 4 -1 7 -1 2 -2 6 -2 7 -1 2 -3 6 -6 9 -5 5 -6 7 -8 14 -2 5 -3 8 -5 10 -3 3 -3 3 -2 5 2 2 6 0 6 -3 1 -2 9 -10 16 -15 4 -3 15 -9 18 -9 1 0 3 -1 5 -2 3 -2 3 -2 8 0 4 3 6 3 11 2 5 0 5 0 8 3 2 1 5 3 6 4 3 2 3 4 -1 6 -6 3 -18 10 -21 13 -2 2 -7 5 -11 6 -10 5 -14 10 -5 9 2 -1 7 -1 12 -2 5 -1 11 -1 14 -2 6 -1 6 -1 11 1 7 4 13 2 13 -3 0 -6 9 -20 13 -20 6 0 6 9 0 17 -5 7 -3 11 9 19 3 1 9 5 13 8 7 5 12 7 14 3z m67 -88 c0 -2 -6 -8 -8 -8 -4 0 -6 5 -4 8 2 3 11 4 12 0z m-146 -49 c4 -5 3 -13 -2 -13 -2 0 -7 11 -5 14 2 2 4 1 7 -1z M572 123 c-6 -5 -11 -8 -15 -8 -1 0 -5 -1 -7 -1 -3 -1 -7 -2 -10 -2 -5 1 -5 -3 1 -5 2 -1 9 -4 15 -6 12 -4 16 -5 23 -2 2 1 4 1 5 0 4 -2 1 -6 -10 -13 -14 -8 0 -15 22 -10 26 5 33 30 8 31 -7 1 -7 1 -10 11 -4 11 -13 14 -22 5z M64 283 c-5 -6 -10 -12 -12 -18 -3 -6 -6 -7 -16 -7 -16 0 -16 -10 0 -17 9 -5 9 -7 3 -18 -9 -18 -2 -31 10 -18 4 5 8 6 8 4 0 -3 -3 -7 -7 -9 -2 -1 -6 -3 -8 -6 -2 -2 -7 -7 -10 -10 -12 -11 -13 -20 -4 -17 9 3 11 1 7 -7 -1 -3 -1 -3 0 -5 4 -2 10 4 10 10 0 10 17 15 25 7 8 -7 16 -5 17 3 0 6 2 8 4 5 3 -2 2 -4 -2 -9 -3 -2 -5 -5 -5 -5 0 -1 -3 -5 -16 -18 -2 -3 -2 -3 -10 -3 -19 1 -31 -7 -16 -11 11 -3 13 -6 7 -12 -5 -4 -4 -6 1 -6 4 1 4 1 7 -2 5 -5 19 -6 24 -1 1 1 4 3 7 4 12 6 15 8 21 13 12 12 12 21 0 21 -5 0 -15 5 -16 8 0 1 4 8 8 11 2 2 5 5 6 7 1 3 4 7 7 9 11 13 -7 23 -26 14 -9 -3 -11 -4 -12 -2 0 2 2 7 5 10 1 2 3 11 3 17 0 2 -1 4 -3 7 -5 7 -5 8 -4 12 8 30 1 53 -13 39z m29 -143 c1 -2 -1 -5 -3 -5 -2 1 -3 4 -1 5 1 2 4 1 4 0z M571 220 c-5 -1 -9 -5 -11 -11 -1 -2 -4 -6 -6 -8 -7 -9 0 -13 15 -9 6 2 16 17 15 22 -2 5 -8 7 -13 6z M596 214 c-7 -4 -9 -16 -2 -18 10 -3 16 8 9 16 -3 3 -4 3 -7 2z M333 171 c-15 -10 -15 -16 1 -14 16 1 20 6 16 15 -3 6 -8 5 -17 -1z M420 161 c-5 -2 -6 -8 -3 -12 7 -6 17 4 11 11 -3 2 -4 2 -8 1z M323 115 c-8 -16 1 -30 12 -18 6 6 6 11 -1 19 -6 7 -7 6 -11 -1z M472 112 c-9 -11 1 -20 11 -10 4 3 4 7 1 11 -4 3 -8 3 -12 -1z M865 105 c-1 -2 -2 -6 -3 -9 -2 -9 -5 -9 -14 -1 -3 3 -7 5 -9 6 -16 4 -18 4 -27 4 -19 -1 -20 -6 -6 -21 6 -6 11 -12 12 -14 7 -11 9 -14 18 -24 12 -13 21 -19 29 -19 3 0 3 0 3 41 0 41 0 45 -3 37z M258 106 c-6 -1 -4 -4 7 -9 14 -7 15 -12 6 -18 -12 -7 -11 -19 2 -19 9 0 13 10 9 20 -1 2 -2 4 -1 6 0 4 -2 12 -4 15 -6 5 -11 7 -19 5z M0 56 l0 -39 8 0 c13 1 17 4 12 10 -6 7 -5 9 2 7 12 -4 24 3 32 18 6 12 10 16 20 25 18 14 -4 23 -33 14 -6 -2 -12 -7 -18 -12 -6 -8 -8 -7 -10 3 -1 8 -5 13 -10 13 -3 0 -3 0 -3 -39z M126 92 c-8 -2 -13 -4 -20 -8 -2 -2 -4 -3 -6 -3 -1 0 -4 -2 -7 -4 -3 -2 -7 -5 -8 -5 -7 -5 3 -23 14 -25 5 -1 6 1 5 8 0 7 1 10 6 10 2 0 3 -3 1 -5 -4 -3 0 -9 11 -16 5 -4 19 -4 29 0 8 3 16 4 22 4 8 0 26 -2 27 -2 2 -2 6 2 6 6 0 8 -17 28 -26 31 -3 0 -6 2 -7 3 -8 6 -33 10 -47 6z M297 15 c-6 -4 -2 -15 7 -15 6 0 10 8 5 13 -5 4 -7 5 -12 2z'/%3E%3C/g%3E%3Cuse xlink:href='%23v' href='%23v' transform='translate(1736 0) scale(-1 1)'/%3E%3C/g%3E%3C/svg%3E");
  --tassels: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='46' viewBox='0 0 44 46'%3E%3Cg fill='none' stroke='%23E5BC66' stroke-linecap='round'%3E%3Cpath d='M22 0v13' stroke-width='1.4'/%3E%3Cpath d='M18 21c-1 8-3 15-4 22M20 22c-1 7-1 14-1.500 21M22 22v22M24 22c1 7 1 14 1.500 21M26 21c1 8 3 15 4 22' stroke-width='1.2'/%3E%3C/g%3E%3Ccircle cx='22' cy='17' r='4.500' fill='%23B0213F' stroke='%23E5BC66'/%3E%3C/svg%3E");
  --strip: 36px;
  --bar: 56px;
  --top: calc(var(--strip) + var(--bar));
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 10px); }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  background: var(--plum);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
}
button, a, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
dialog :focus-visible { outline-color: var(--kumkum); }

/* Contact numbers stay in view on every page. The bar below is clear over the home hero. */
.top { position: sticky; top: 0; z-index: 5; }
.home .top { margin-bottom: calc(-1 * var(--bar)); }
.strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: var(--strip);
  padding: 0 8px;
  background: #2A0723;
  color: var(--zari);
  font-size: 0.82rem;
  white-space: nowrap;
}
.strip a { display: inline-flex; align-items: center; gap: 5px; height: 100%; color: inherit; text-decoration: none; }
.strip svg { flex: none; width: 15px; height: 15px; fill: currentColor; }
.bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: var(--bar);
  padding: 0 var(--gutter);
  background: var(--plum);
  box-shadow: 0 1px 0 rgba(229, 188, 102, 0.4);
  color: var(--silk);
}
.at-top .bar { background: none; box-shadow: none; }
.bar-brand { display: flex; flex: none; align-items: center; gap: 8px; min-width: 0; color: inherit; text-decoration: none; }
.at-top .bar-brand { visibility: hidden; }
.bar-logo { display: block; width: auto; height: 38px; }
.bar-words { display: grid; }
.bar-name { font: 500 1.14rem/1.1 var(--display); white-space: nowrap; }
.bar-since { color: var(--zari); font: italic 500 0.8rem/1.2 var(--display); white-space: nowrap; }
.links { display: none; }
.links a { padding: 6px 8px; color: inherit; font-weight: 500; text-decoration: none; }
.links a[aria-current="page"] { color: var(--zari); box-shadow: inset 0 -2px 0 var(--zari); }
.menu { position: static; order: 2; }
.menu summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 0 0 8px; font-weight: 500; list-style: none; cursor: pointer; }
.menu summary::before { content: ""; width: 16px; height: 12px; background: linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 5px / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 10px / 100% 2px no-repeat; }
.menu[open] summary { color: var(--zari); }
.menu summary::-webkit-details-marker { display: none; }
.menu nav {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: grid;
  padding: 6px var(--gutter) 12px;
  background: var(--plum);
  box-shadow: 0 1px 0 rgba(229, 188, 102, 0.4);
}
.menu nav a[data-part="index"] { --part: var(--zari); }
.menu nav a { padding: 11px 0 11px 12px; border-left: 4px solid var(--part, var(--zari)); margin-top: 4px; color: var(--silk); font-weight: 500; text-decoration: none; }
nav .beta { margin-left: 4px; }
.menu-out { min-height: 44px; padding: 0; border: 0; background: none; color: var(--zari); font-weight: 500; text-align: left; cursor: pointer; }
.wide-only { display: none; }
.bar-actions { display: flex; flex: none; align-items: center; gap: 4px; margin-left: auto; }
.bar-link { min-height: 44px; padding: 0 8px; border: 0; background: none; font-weight: 500; cursor: pointer; }
.cart-pill {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--marigold);
  color: var(--plum);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
a.cart-pill { display: inline-flex; align-items: center; }

/* Hero: the peacock opens its fan, then the foil runs across Since 1966 */
.hero {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 66px var(--gutter) 40px;
  overflow: hidden;
  background:
    radial-gradient(95% 62% at 50% 33%, rgba(122, 31, 107, 0.8), transparent 72%),
    var(--butta),
    var(--plum);
  color: var(--silk);
  text-align: center;
}
.hero-text { display: grid; justify-items: center; }
.blessing { margin: 0 0 14px; color: var(--zari); font-size: 1.04rem; }
.fan { display: block; width: auto; overflow: visible; }
.hero-fan { height: clamp(176px, 29vh, 250px); }
.hero-fan path { fill: url(#zari); }
h1 {
  margin: 14px 0 0;
  font: 500 clamp(3rem, 14.5vw, 4.5rem)/1.02 var(--display);
  letter-spacing: -0.01em;
}
.since {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  width: 100%;
  margin: 0.16em 0 0;
  color: var(--zari);
  font: italic 500 clamp(2.5rem, 13vw, 4.1rem)/1.16 var(--display);
}
.since::before, .since::after {
  content: "";
  flex: 0 1 3.4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--zari));
}
.since::after { transform: scaleX(-1); }
.foil { flex: none; padding: 0 0.1em; white-space: nowrap; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .foil {
    background: linear-gradient(100deg, #B8862B 0%, #E5BC66 18%, #FFEDB5 34%, #E5BC66 50%, #F6D27A 68%, #C8963A 100%) 0 0 / 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.lede { margin: 8px 0 22px; color: #F4E6D3; font-size: 1.08rem; }
.hero-marks { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.hero-marks img { display: block; width: auto; height: 42px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 24px;
  border: 1.5px solid var(--plum-2);
  border-radius: 999px;
  background: var(--plum-2);
  color: var(--silk);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn.plain { background: none; color: var(--plum-2); }
.btn.gold { border-color: var(--marigold); background: var(--marigold); color: var(--plum); }
.btn:disabled { opacity: 0.6; cursor: default; }

/* The woven border from the shop bag */
.band {
  height: 72px;
  border-block: 3px double var(--zari);
  background: var(--vine) center / auto 76% repeat-x, var(--kumkum);
}

/* The color of each part of the site */
[data-part="index"], .in-privacy, .in-404 { --part: var(--plum-2); --part-ink: var(--silk); --part-soft: var(--zari); }
[data-part="look"] { --part: var(--plum-3); --part-ink: var(--silk); --part-soft: #F3E2F0; }
[data-part="about"], .in-about { --part: var(--kumkum); --part-ink: var(--silk); --part-soft: #FFE3C4; }
[data-part="made"], .in-made { --part: var(--teal); --part-ink: var(--silk); --part-soft: #CFF0EC; }
[data-part="care"], .in-care { --part: var(--leaf); --part-ink: var(--silk); --part-soft: #D4F0DA; }
[data-part="visit"], .in-visit { --part: #3C4A8C; --part-ink: var(--silk); --part-soft: #DDE3FA; }
[data-part="faq"], .in-faq { --part: var(--marigold); --part-ink: var(--plum); --part-soft: var(--plum-2); }

/* Temple arch photo frame */
.frame {
  display: block;
  aspect-ratio: 3 / 4;
  padding: 3px;
  background: linear-gradient(160deg, #F2D48A, #B8862B 42%, #F6E0A6 70%, #A9781F);
  -webkit-mask: var(--arch) center / 100% 100% no-repeat;
  mask: var(--arch) center / 100% 100% no-repeat;
}
.frame-in {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--line);
  -webkit-mask: var(--arch) center / 100% 100% no-repeat;
  mask: var(--arch) center / 100% 100% no-repeat;
}
.frame-in { position: relative; }
.frame-in img { width: 100%; height: 100%; object-fit: cover; }
.frame-in .second { position: absolute; inset: 0; opacity: 0; transition: opacity 360ms ease; }
@media (hover: hover) {
  .piece:hover .frame-in .second { opacity: 1; }
}
/* Silk catches the light: the shine follows a mouse, and crosses each photo as a phone scrolls. */
.grid .frame-in::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 30%), rgba(255, 245, 214, 0.5), rgba(255, 245, 214, 0) 46%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}
@media (hover: hover) {
  .piece:hover .frame-in::after { opacity: 1; }
}
.notice {
  margin: 0;
  padding: 7px var(--gutter);
  background: var(--marigold);
  color: var(--plum);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.look-page .notice { display: none; }
.gone { margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--marigold); color: var(--plum); font-weight: 500; }
.gone a { color: inherit; font-weight: 700; }
/* Spools of thread for shopping by color. */
.rack {
  display: flex;
  gap: 14px;
  margin: 0 calc(-1 * var(--gutter)) 18px;
  padding: 6px var(--gutter) 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rack::-webkit-scrollbar { display: none; }
.spool {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--silk);
  font-size: 0.8rem;
  cursor: pointer;
}
.spool-thread {
  position: relative;
  display: block;
  width: 34px;
  height: 42px;
  margin: 5px 0;
  border-radius: 3px;
  background:
    repeating-linear-gradient(176deg, rgba(255, 255, 255, 0.16) 0 1px, rgba(0, 0, 0, 0.12) 1px 3px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.32), rgba(255, 255, 255, 0.26) 42%, rgba(0, 0, 0, 0.28)),
    var(--thread);
  transition: transform 200ms ease;
}
.spool-thread::before, .spool-thread::after {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #6B4426, #B98A55 45%, #6B4426);
}
.spool-thread::before { top: -5px; }
.spool-thread::after { bottom: -5px; }
.spool[aria-pressed="true"] { color: var(--marigold); font-weight: 600; }
.spool[aria-pressed="true"] .spool-thread { transform: translateY(-4px); box-shadow: 0 8px 12px -6px var(--marigold); }
.spool:focus-visible { outline: 2px solid var(--marigold); outline-offset: 3px; border-radius: 6px; }
@media (hover: hover) {
  .spool:hover .spool-thread { transform: translateY(-3px) rotate(-3deg); }
}
.book { display: grid; gap: 6px; max-width: 30em; margin: 18px 0 0; }
.book fieldset { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; border: 0; }
.book legend { padding: 0; font-weight: 600; }
.book label { font-weight: 600; }
.book fieldset label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; }
.book input:not([type="radio"]), .book select, .book textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--silk);
  color: var(--ink);
  font: inherit;
}
.book > label { margin-top: 10px; }
.book .btn { justify-self: start; margin-top: 16px; }
.book-note { margin-top: 12px; color: var(--muted); font-size: 0.92rem; }

/* Items */
.gallery { padding: 44px var(--gutter) 60px; background: var(--butta), var(--plum); color: var(--silk); }
.gallery-head { text-align: center; }
.gallery h2 { margin: 0; color: var(--zari); font: 500 clamp(2.4rem, 10vw, 3.6rem)/1.1 var(--display); }
.count { min-height: 1.5em; margin: 6px 0 0; color: #E2CFD8; }
.guest-on { max-width: 30em; margin: 2px auto 0; color: var(--zari); font-weight: 500; }
.gallery .btn.plain { border-color: var(--zari); color: var(--zari); }
.shop { max-width: 1320px; margin: 24px auto 0; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.search {
  flex: 1 1 100%;
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--silk);
  color: var(--ink);
  font: inherit;
}
.btn.small { min-height: 42px; padding: 6px 18px; }
.sort { display: flex; flex: 0 1 auto; align-items: center; gap: 8px; min-width: 0; margin-left: auto; color: #E2CFD8; }
.sort select {
  min-height: 42px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 10px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--silk);
  color: var(--ink);
}
.chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.chip {
  min-height: 40px;
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--zari);
  color: var(--plum);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
}
.clear { min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--zari); font-size: 0.92rem; text-decoration: underline; cursor: pointer; }
.filters { display: none; }
.filters .check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--marigold); }
.group { padding: 14px 0; border-top: 1px solid var(--line); }
.filters .group { border-top-color: rgba(229, 188, 102, 0.28); }
.group:first-child { padding-top: 0; border-top: 0; }
.group h3 { margin: 0 0 6px; color: var(--plum); font: 500 1.16rem/1.2 var(--display); }
.filters .group h3 { color: var(--zari); }
.filters .check .num { color: #E2CFD8; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.panel .check input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--plum-2); }
.dot { flex: none; width: 14px; height: 14px; border: 1px solid rgba(44, 14, 38, 0.25); border-radius: 50%; }
.check .num { margin-left: auto; color: var(--muted); font-size: 0.9rem; }
.grid {
  --cols: 2;
  --gap: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px var(--gap);
  max-width: 1240px;
  margin: 30px auto 0;
  padding: 0;
  list-style: none;
}
.grid li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
.grid li:nth-child(even) { margin-top: 34px; }
.piece { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; text-align: center; cursor: pointer; }
.badge {
  position: absolute;
  top: 16%;
  left: 6px;
  z-index: 1;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--kumkum);
  color: var(--silk);
  font-size: 0.8rem;
  font-weight: 600;
}
.piece { color: var(--silk); }
.grid li { position: relative; }
.heart {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.heart svg { width: 24px; height: 24px; fill: none; stroke: var(--zari); stroke-width: 1.7; stroke-linejoin: round; }
.heart.on svg { fill: var(--marigold); stroke: var(--marigold); }
.heart:focus-visible { outline: 2px solid var(--marigold); outline-offset: -4px; border-radius: 50%; }
#saved-open[aria-pressed="true"] { background: var(--zari); color: var(--plum); }
.piece-type { display: block; margin-top: 12px; color: var(--zari); font-size: 0.86rem; font-weight: 500; line-height: 1.3; }
.piece-name {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  font: 500 1.26rem/1.22 var(--display);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.piece-color { display: block; margin-top: 3px; color: #E2CFD8; font-size: 0.92rem; line-height: 1.3; }
.piece-qty { display: block; margin-top: 4px; color: #E2CFD8; font-size: 0.94rem; }
@media (hover: hover) {
  .piece:hover .piece-name { text-decoration: underline; text-decoration-color: var(--marigold); text-underline-offset: 3px; }
}
/* A design's colors, stacked like folded sarees on a shop shelf */
.piece-colors { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: #E2CFD8; font-size: 0.92rem; }
.folds { display: inline-grid; gap: 1px; width: 34px; }
.fold {
  display: block;
  width: 100%;
  height: 7px;
  border-radius: 1px 4px 4px 1px;
  background: var(--fold, var(--line));
  box-shadow: inset 0 -1px 0 var(--zari);
}
.note { max-width: 32em; margin: 24px auto 0; text-align: center; }
.note h3 { margin: 0 0 6px; color: var(--zari); font: 500 1.7rem/1.2 var(--display); }
.note p { margin: 0 0 14px; }
.guest-panel {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 560px;
  margin: 56px auto 0;
  padding: 26px 22px;
  border-radius: 22px;
  background: var(--cream);
  color: var(--ink);
  text-align: center;
}
.guest-panel h3 { margin: 0; color: var(--plum); font: 500 1.6rem/1.2 var(--display); }
.guest-panel p { margin: 0 0 8px; }

/* Footer */
.foot {
  display: grid;
  gap: 28px;
  justify-items: center;
  padding: 72px var(--gutter) calc(30px + env(safe-area-inset-bottom));
  background: var(--butta), var(--plum);
  color: var(--silk);
  text-align: center;
}
.look-page .foot { padding-top: 36px; background: var(--butta), var(--plum); }
.foot-brand { display: grid; align-content: start; justify-items: center; }
.foot-logo { display: block; width: auto; height: 116px; }
.foot-name { margin: 10px 0 0; font: 500 1.9rem/1.1 var(--display); }
.foot-since { margin: 0; color: var(--zari); font: italic 500 1.5rem/1.3 var(--display); }
.foot-contact h2 { margin: 0 0 8px; color: var(--zari); font: 500 1.5rem/1.2 var(--display); }
.ways { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ways a, .foot-links a { text-underline-offset: 3px; }
.address { white-space: pre-line; }
.map-row { width: min(340px, 100%); margin-top: 8px; }
.map { display: block; width: 100%; height: 220px; border: 0; border-radius: 14px; background: var(--plum-2); }
.foot-links { display: grid; align-content: start; gap: 6px; }
.foot-links h2 { margin: 0 0 8px; color: var(--zari); font: 500 1.5rem/1.2 var(--display); }
.marks { display: flex; align-items: center; justify-content: center; gap: 16px; }
.marks img { display: block; width: auto; height: 56px; }

/* Popups */
dialog {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--cream);
  color: var(--ink);
}
dialog::backdrop { background: rgba(42, 7, 35, 0.78); }
.sheet { position: relative; display: flex; flex-direction: column; min-height: 100%; }
.view { position: relative; display: flex; flex: none; flex-direction: column; height: 66vh; height: 66dvh; background: var(--plum); }
.slides {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slides::-webkit-scrollbar { display: none; }
.slide { display: flex; flex: 0 0 100%; align-items: center; justify-content: center; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.slide { position: relative; overflow: hidden; }
.slide img { width: 100%; height: 100%; object-fit: contain; }
.slide.up-close img { object-fit: cover; }
.slide:not(.up-close) { cursor: zoom-in; }
.slide.zoomed { cursor: zoom-out; }
.slide img { transition: transform 240ms ease; }
.slide.zoomed img { transform: scale(2.4); }
.slide.up-close.show img { animation: closer 2600ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes closer { from { transform: scale(1); } to { transform: scale(1.7); } }
.thumbs { display: flex; flex: none; gap: 8px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; }
.thumb {
  flex: none;
  width: 44px;
  height: 58px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  overflow: hidden;
  opacity: 0.72;
  cursor: pointer;
}
.thumb:first-child { margin-left: auto; }
.thumb:last-child { margin-right: auto; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb[aria-current="true"] { border-color: var(--marigold); opacity: 1; }
.close {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: 10px;
  z-index: 1;
  min-height: 44px;
  padding: 6px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--silk);
  color: var(--plum);
  font-weight: 600;
  cursor: pointer;
}
.words { padding: 20px var(--gutter) 28px; }
.words .kind { margin: 0 0 2px; color: var(--zari-deep); font-weight: 500; }
.words h2 { margin: 0; color: var(--plum); font: 500 1.8rem/1.2 var(--display); }
.words p { max-width: 34em; }
.words .text { margin: 12px 0 0; white-space: pre-line; }
.words .qty { margin: 8px 0 0; color: var(--muted); font-weight: 500; }
.words .color-line { margin: 4px 0 0; color: var(--plum-2); font-weight: 500; }
.colors { margin-top: 16px; }
.colors h3 { margin: 0 0 8px; color: var(--plum); font: 500 1.14rem/1.2 var(--display); }
.color-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.color-row::-webkit-scrollbar { display: none; }
.color-tile { flex: 0 0 84px; padding: 0; border: 0; background: none; color: inherit; font-size: 0.8rem; line-height: 1.2; text-align: left; cursor: pointer; }
.color-tile[aria-pressed="true"] .frame { padding: 4px; background: var(--kumkum); }
.color-tile[aria-pressed="true"] { font-weight: 600; }
.color-words { display: grid; gap: 4px; margin-top: 6px; }
.color-words span:last-child { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.color-words .fold { width: 34px; height: 8px; }
.words .blouse-line { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-weight: 500; }
.blouse-line .fold { flex: none; width: 34px; height: 12px; }
.zoom-btn { display: block; color: var(--plum-2); }
.designer { margin: 4px 0 0; }
.designer-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--zari-deep);
  font: italic 500 1.05rem/1.3 var(--display);
  text-align: left;
  cursor: pointer;
}
.designer-name span { text-decoration: underline dotted; text-underline-offset: 3px; }
.designer-face {
  flex: none;
  width: 34px;
  height: 34px;
  border: 2px solid var(--zari);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 16%;
}
.designer-fold { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 220ms ease-out, visibility 220ms; }
.designer-clip { min-height: 0; overflow: hidden; }
.designer.open .designer-fold { grid-template-rows: 1fr; visibility: visible; }
.designer.plain .designer-fold { display: none; }
.designer.plain .designer-name { cursor: default; }
.designer.plain .designer-name span { text-decoration: none; }
@media (hover: hover) {
  .designer:not(.plain):hover .designer-fold { grid-template-rows: 1fr; visibility: visible; }
}
.designer-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--zari);
  border-radius: 14px;
  background: var(--silk);
}
.designer-photo {
  flex: none;
  width: 84px;
  height: 112px;
  border: 2px solid var(--zari);
  border-radius: 42px 42px 8px 8px;
  object-fit: cover;
  object-position: 50% 12%;
}
.words .designer-who { margin: 0; color: var(--plum); font: 500 1.14rem/1.2 var(--display); }
.words .designer-bio { margin: 4px 0 0; font-size: 0.94rem; line-height: 1.4; }
.slide-note {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(58, 10, 48, 0.82);
  color: var(--silk);
  font-size: 0.82rem;
  text-align: center;
  transform: translateX(-50%);
}
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag-list span { padding: 2px 10px; border-radius: 999px; background: var(--line); font-size: 0.9rem; }
.related { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.related h3 { margin: 0 0 10px; color: var(--plum); font: 500 1.2rem/1.2 var(--display); }
.related-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.related-item { flex: 0 0 84px; padding: 0; border: 0; background: none; color: inherit; font-size: 0.82rem; line-height: 1.2; text-align: center; cursor: pointer; }
.related-name { display: block; margin-top: 5px; }
.related-why { display: block; margin-top: 2px; color: var(--zari-deep); font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.buy .btn { flex: 1 1 auto; }
.hint { color: var(--muted); font-size: 0.94rem; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--plum-2); border-radius: 999px; }
.stepper button {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--plum-2);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.stepper button:disabled { opacity: 0.3; cursor: default; }
.stepper-value { min-width: 34px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.panel { display: flex; flex-direction: column; gap: 14px; padding: 20px var(--gutter) 28px; }
.panel h2 { margin: 0; color: var(--plum); font: 500 1.8rem/1.2 var(--display); }
.panel p { margin: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#filter-sheet .panel-head { position: sticky; top: 0; z-index: 1; margin: -20px calc(-1 * var(--gutter)) 0; padding: 14px var(--gutter); background: var(--cream); box-shadow: 0 1px 0 var(--line); }
.panel label { font-weight: 600; }
.panel input {
  width: 100%;
  min-height: 48px;
  padding: 8px 14px;
  border: 1.5px solid var(--plum-2);
  border-radius: 12px;
  background: var(--silk);
  color: var(--ink);
  font: inherit;
}
.error { color: var(--kumkum); font-weight: 500; }
.cart-note { padding: 10px 14px; border-radius: 12px; background: var(--line); font-weight: 500; }
.lines { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.line { display: flex; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.line-photo { flex: none; width: 72px; padding: 2px; }
.line-main { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.line-name { font: 500 1.08rem/1.25 var(--display); }
.line-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.cart-total { margin-bottom: 4px !important; font-weight: 600; }
.held-box { display: grid; gap: 10px; }
.held-box h3 { margin: 0; color: var(--plum); font: 500 1.3rem/1.2 var(--display); }
.held { padding: 12px 14px; border-radius: 14px; background: var(--line); }
.held p { margin: 0; }
.held ul { margin: 6px 0; padding-left: 18px; }

/* Information pages */
.page { padding: 0 var(--gutter) 56px; background: var(--cream); }
.page-in { max-width: 760px; margin: 0 auto; }
.page h1 { margin: 0 auto; max-width: 760px; color: var(--part-ink); font-size: clamp(2.6rem, 11vw, 3.8rem); }
.page .sub { margin: 8px auto 0; max-width: 760px; color: var(--part-soft); font: italic 500 1.4rem/1.3 var(--display); }
/* Each part of the site keeps one color, here at the top of its page and on its tile and menu line. */
.page-head {
  position: relative;
  margin: 0 calc(-1 * var(--gutter)) 40px;
  padding: 34px var(--gutter) 30px;
  background: var(--butta), var(--part);
}
.page-head::after {
  content: "";
  position: absolute;
  inset: auto 0 -13px;
  height: 14px;
  background: radial-gradient(circle at 14px 0, var(--part) 13px, transparent 14px) 0 0 / 28px 14px repeat-x;
}
.page h2 {
  margin: 36px 0 10px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--plum);
  font: 500 1.7rem/1.2 var(--display);
}
.page h2::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 22px;
  margin-right: 10px;
  background: var(--part);
  vertical-align: -2px;
  -webkit-mask: var(--arch) center / 100% 100% no-repeat;
  mask: var(--arch) center / 100% 100% no-repeat;
}
.page-in > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.page p, .page li { max-width: 68ch; }
.page a:not(.btn) { color: var(--plum-2); }
.center { text-align: center; }
.center .actions { justify-content: center; }
.photo { margin: 24px 0 0; }
.photo img {
  width: 100%;
  height: auto;
  padding: 3px;
  border-radius: 20px;
  background: linear-gradient(160deg, #F2D48A, #B8862B 42%, #F6E0A6 70%, #A9781F);
}
.photo figcaption { margin-top: 8px; color: var(--muted); font-size: 0.95rem; text-align: center; }
h2 + .photo { margin-top: 12px; }
.timeline { display: grid; gap: 18px; margin: 16px 0 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 84px 1fr; gap: 14px; }
.timeline b { color: var(--kumkum); font: italic 500 1.5rem/1.2 var(--display); }
.made { counter-reset: step; }
.steps { display: grid; gap: 24px; margin: 14px 0 0; padding: 0; list-style: none; }
.step { display: grid; gap: 12px; counter-increment: step; }
.step img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 18px; object-fit: cover; background: var(--line); }
.step h3 { margin: 0; color: var(--plum); font: 500 1.5rem/1.2 var(--display); }
.step h3::before { content: counter(step) ". "; color: var(--kumkum); }
.step p { margin: 6px 0 0; }
.credit { margin-top: 6px !important; color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; }
.checks { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.checks li { padding: 12px 14px; border-radius: 14px; background: var(--silk); box-shadow: inset 0 0 0 1px var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 13px 34px 13px 0; color: var(--plum); font-weight: 600; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: linear-gradient(var(--zari-deep) 0 0) center / 100% 2px no-repeat, linear-gradient(var(--zari-deep) 0 0) center / 2px 100% no-repeat;
  transition: transform 220ms ease;
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { margin: 0 0 14px; }
.text-btn {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
#guest, #filter-sheet { width: min(440px, calc(100% - 32px)); height: fit-content; max-height: calc(100% - 32px); margin: auto; border-radius: 22px; }

@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .grid { --cols: 3; --gap: 22px; row-gap: 38px; }
  .grid li:nth-child(even) { margin-top: 0; }
  .grid li:nth-child(3n + 2) { margin-top: 38px; }
  .band { height: 88px; }
  .search { flex: 1 1 240px; }
  .step { grid-template-columns: 1fr 1.2fr; align-items: center; gap: 24px; }
  #cart { width: min(640px, 92vw); height: min(760px, 90vh); margin: auto; border-radius: 22px; }
  .foot { grid-template-columns: auto auto auto; justify-content: center; gap: 28px 64px; text-align: left; }
  .foot-brand { justify-items: start; }
  .marks { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .links { display: flex; flex: 1; justify-content: center; }
  .menu { display: none; }
  .wide-only { display: inline-block; }
}
@media (min-width: 960px) {
  .hero { padding: 76px clamp(32px, 6vw, 96px) 56px; }
  .hero.with-show { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; gap: 24px; }
  .hero-fan { height: clamp(210px, 32vh, 300px); }
  h1 { font-size: 5.2rem; }
  .since { font-size: 4.5rem; }
  .hero-show { display: flex; align-items: center; justify-content: center; padding: 18px 0; }
  .show-card { flex: 0 1 37%; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 18px 26px rgba(20, 2, 16, 0.5)); }
  .show-card:first-child { position: relative; z-index: 1; margin-right: -7%; transform: rotate(-6deg) translateY(16px); }
  .show-card:nth-child(2) { position: relative; z-index: 2; }
  .show-card:nth-child(3), .show-card:nth-child(2):last-child { position: relative; z-index: 1; margin-left: -7%; transform: rotate(6deg) translateY(16px); }
  .show-card:only-child { flex-basis: 46%; margin: 0; transform: none; }
}
@media (min-width: 1040px) {
  :root { --gutter: 52px; }
  .shop.has-filters { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
  .has-filters .filters { display: block; }
  .has-filters #filter-open { display: none; }
  .shop:not(.has-filters) .grid { --cols: 4; --gap: 26px; }
  .shop:not(.has-filters) .grid li:nth-child(3n + 2) { margin-top: 0; }
  .shop:not(.has-filters) .grid li:nth-child(even) { margin-top: 38px; }
  dialog { width: min(1040px, 92vw); height: min(760px, 90vh); margin: auto; border-radius: 22px; }
  .sheet { flex-direction: row; height: 100%; }
  .view { flex: 1 1 58%; height: 100%; min-width: 0; }
  .words { flex: 1 1 42%; align-self: center; max-height: 100%; padding: 32px; overflow-y: auto; }
}
@media (min-width: 1320px) {
  .has-filters .grid { --cols: 4; --gap: 26px; }
  .has-filters .grid li:nth-child(3n + 2) { margin-top: 0; }
  .has-filters .grid li:nth-child(even) { margin-top: 38px; }
}
/* How's my look: the figure stays in view above the choices */
.look { display: flex; flex-direction: column; height: calc(100dvh - var(--top)); min-height: 560px; background: var(--cream); }
.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(70% 60% at 50% 42%, #FFFDF6, var(--cream) 70%, #F2E4C8);
}
.stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.stage-top { position: absolute; top: 8px; left: 12px; width: min(34%, 200px); pointer-events: none; }
.stage-top h1 { margin: 0; color: var(--plum); font-size: 1.2rem; line-height: 1.15; }
.beta {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--marigold);
  color: var(--plum);
  font: 600 0.72rem/1.5 var(--body);
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.stage-item { display: -webkit-box; margin: 4px 0 0; overflow: hidden; color: var(--ink); font-size: 0.84rem; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.stage-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  margin: 0;
  padding: 2px 12px;
  border-radius: 999px;
  background: rgba(58, 10, 48, 0.78);
  color: var(--silk);
  font-size: 0.82rem;
  transform: translateX(-50%);
  pointer-events: none;
}
.stage-note { margin: 4px 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.25; }
.no-3d .stage-top { width: auto; right: 12px; }
.views { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; }
.views button {
  min-width: 62px;
  min-height: 40px;
  padding: 0 10px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--silk);
  color: var(--plum);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}
.dock { flex: none; background: var(--silk); box-shadow: 0 -1px 0 var(--line); }
.tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: 1 0 auto;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
}
.tabs [aria-selected="true"] { border-bottom-color: var(--kumkum); color: var(--plum); }
.tab-panel { height: 164px; padding: 8px 12px; overflow-y: auto; overscroll-behavior: contain; }
.choice { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.choice-name { flex: 0 0 64px; margin: 0; color: var(--muted); font-size: 0.82rem; font-weight: 500; line-height: 1.15; }
.chips { display: flex; flex: 1; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.pick-chip {
  flex: none;
  min-height: 42px;
  padding: 0 13px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.95rem;
  cursor: pointer;
}
.pick-chip[aria-pressed="true"] { border-color: var(--plum); background: var(--plum); color: var(--zari); }
.pick-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pick-row::-webkit-scrollbar { display: none; }
.pick { flex: 0 0 88px; padding: 0; border: 0; background: none; color: inherit; font-size: 0.78rem; line-height: 1.2; text-align: center; cursor: pointer; }
.pick .frame { width: 76px; margin: 0 auto; }
.pick[aria-pressed="true"] .frame { padding: 4px; background: var(--kumkum); }
.pick-name { display: -webkit-box; margin-top: 4px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 38px; height: 38px; padding: 0; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--plum); }
.blouse-row { display: flex; align-items: center; gap: 14px; }
.color-wheel {
  position: relative;
  flex: none;
  width: 142px;
  height: 142px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0)), conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  touch-action: none;
  cursor: crosshair;
}
.color-wheel span {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.blouse-side { flex: 1; min-width: 0; }
.shade { display: block; margin-top: 8px; color: var(--muted); font-size: 0.84rem; }
.shade input { display: block; width: 100%; height: 36px; margin: 0; accent-color: var(--plum-2); }
.stage-actions { position: absolute; bottom: 8px; left: 8px; display: flex; flex-direction: column; gap: 6px; }
.stage-actions .btn.small { min-height: 38px; padding: 2px 12px; font-size: 0.86rem; }
.stage-actions .btn.plain { background: var(--silk); }

/* The peacock wheel of photos on the home page */
.fanfare {
  position: relative;
  height: 330px;
  overflow: hidden;
  background: radial-gradient(70% 90% at 50% 100%, #FFFDF6, var(--cream) 70%);
  color: var(--plum);
}
.fanfare::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 96px;
  background: linear-gradient(transparent, var(--cream));
  pointer-events: none;
}
.fanfare[hidden] + .band { display: none; }
.spin { --r: 240px; --card: 98px; position: absolute; top: calc(var(--r) + 150px); left: 50%; width: 0; height: 0; will-change: transform; }
.spin-card {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--card);
  margin-left: calc(var(--card) / -2);
  padding: 0;
  border: 0;
  background: none;
  transform-origin: 50% 0;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r) - var(--card) * 1.33));
  animation: feather 900ms cubic-bezier(0.18, 0.8, 0.24, 1) both;
  animation-delay: var(--d);
}
button.spin-card { cursor: pointer; }
.fan-title {
  position: absolute;
  right: 0;
  bottom: 14px;
  left: 0;
  z-index: 1;
  margin: 0;
  color: var(--plum-2);
  font: italic 500 1.4rem/1.2 var(--display);
  text-align: center;
}
@keyframes feather { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@media (min-width: 640px) {
  .fanfare { height: 400px; }
  .spin { --r: 420px; --card: 140px; top: calc(var(--r) + 206px); }
}
@media (min-width: 1040px) {
  .look { flex-direction: row; }
  .dock { display: flex; flex: 0 0 440px; flex-direction: column; box-shadow: -1px 0 0 var(--line); }
  .tab-panel { flex: 1; height: auto; }
  .fanfare { height: 460px; }
  .spin { --r: 640px; --card: 170px; top: calc(var(--r) + 246px); }
}

/* Very narrow phones */
@media (max-width: 359px) {
  .strip { gap: 10px; font-size: 0.76rem; }
  .strip svg { width: 13px; height: 13px; }
  .bar { gap: 4px; padding: 0 10px; }
  .bar-name { font-size: 1.04rem; }
  .bar-link { padding: 0 6px; }
  .menu summary { padding-left: 4px; }
  .cart-pill { padding: 0 11px; }
  .sort span { display: none; }
}
/* Phones held sideways: keep more of the screen for the page */
@media (max-height: 480px) {
  :root { --strip: 30px; --bar: 46px; }
  .bar-logo { height: 32px; }
  .hero { padding-top: 54px; }
  .hero-fan { height: 120px; }
  .view { height: 86dvh; }
  .look { flex-direction: row; height: calc(100dvh - var(--top)); min-height: 280px; }
  .dock { display: flex; flex: 0 0 56%; flex-direction: column; box-shadow: -1px 0 0 var(--line); }
  .tab-panel { flex: 1; height: auto; }
  .stage-item, .stage-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .spin-card { animation: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-fan path {
    transform-box: view-box;
    transform-origin: 370px 740px;
    animation: fan 1s cubic-bezier(0.18, 0.8, 0.24, 1) var(--d, 0s) both;
  }
  .foil { animation: foil 1.5s ease-out 0.75s both; }
  dialog[open] { animation: rise 180ms ease-out; }
  @keyframes fan { from { opacity: 0; transform: rotate(var(--a, 0deg)) scale(0.5); } to { opacity: 1; transform: none; } }
  @keyframes foil { from { background-position: 100% 0; } to { background-position: 0 0; } }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* Tassels hang from the last band, as their own piece so they can sway. */
.foot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 46px;
  background: var(--tassels) top center / 44px 46px repeat-x;
  transform-origin: 50% 0;
  pointer-events: none;
}
.foot { position: relative; }

/* The rest of the site, from the home page */
.explore { padding: 42px var(--gutter) 52px; background: radial-gradient(80% 90% at 50% 0, #FFFDF6, var(--cream) 70%); text-align: center; }
.explore h2 { margin: 0; color: var(--plum); font: 500 clamp(2rem, 8vw, 2.8rem)/1.15 var(--display); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1120px; margin: 26px auto 0; }
.tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-height: 196px;
  padding: 56px 12px 18px;
  color: var(--part-ink);
  text-decoration: none;
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--butta), var(--part);
  -webkit-mask: var(--arch) center / 100% 100% no-repeat;
  mask: var(--arch) center / 100% 100% no-repeat;
}
.tile:first-child { grid-column: 1 / -1; min-height: 176px; }
.tile-name { font: 500 1.4rem/1.15 var(--display); }
.tile-words { color: var(--part-soft); font-size: 0.92rem; line-height: 1.3; }

/* How it's made: which stage you are in, and a thread that follows you down */
.stages {
  position: sticky;
  top: var(--top);
  z-index: 2;
  display: flex;
  gap: 8px;
  margin: -24px calc(-1 * var(--gutter)) 24px;
  padding: 10px var(--gutter);
  overflow-x: auto;
  background: var(--cream);
  box-shadow: 0 1px 0 var(--line);
  scrollbar-width: none;
}
.stages::-webkit-scrollbar { display: none; }
html:has(.stages) { scroll-padding-top: calc(var(--top) + 72px); }
.stages a {
  flex: none;
  min-height: 36px;
  padding: 6px 14px;
  border: 1.5px solid var(--part);
  border-radius: 999px;
  color: var(--part);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.stages a[aria-current="true"] { background: var(--part); color: var(--silk); }
.made { position: relative; }
.made::before, .made::after { content: ""; position: absolute; top: 0; left: -9px; width: 2px; border-radius: 2px; }
.made::before { bottom: 0; background: var(--line); }
.made::after { height: var(--thread, 0); background: linear-gradient(var(--zari), var(--part)); }
.shuttle {
  position: absolute;
  top: var(--thread, 0);
  left: -12px;
  z-index: 1;
  width: 8px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50% / 50%;
  background: linear-gradient(90deg, #F6E0A6, #B8862B);
  box-shadow: 0 0 0 1px rgba(131, 86, 12, 0.5);
}

@media (min-width: 640px) {
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .tile, .tile:first-child { grid-column: auto; min-height: 250px; }
  .made::before, .made::after { left: -22px; }
  .shuttle { left: -25px; }
}
@media (min-width: 840px) {
  .stages { justify-content: center; }
}
@media (hover: hover) {
  .tile { transition: transform 200ms ease; }
  .tile:hover { transform: translateY(-5px); }
  .piece .fold { transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .piece:hover .fold { transform: translateX(calc(var(--i, 0) * 3px)); }
}

/* Motion that answers what someone just did. None of it runs for people who ask for less motion. */
@media (prefers-reduced-motion: no-preference) {
  dialog[open]::backdrop { animation: dim 220ms ease-out; }
  .slides.swap { animation: swap 260ms ease-out; }
  .heart.pop svg { animation: pop 340ms cubic-bezier(0.2, 1.6, 0.4, 1); }
  .bump { animation: bump 380ms cubic-bezier(0.2, 1.6, 0.4, 1); }
  .band { transition: clip-path 1000ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .band.wait { clip-path: inset(0 48%); }
  .foot.sway::before { animation: sway 1500ms ease-out; }
  .btn:active, .cart-pill:active { transform: scale(0.97); }
  ::view-transition-group(*) { animation-duration: 300ms; }
  @keyframes dim { from { opacity: 0; } to { opacity: 1; } }
  @keyframes swap { from { opacity: 0.2; transform: scale(0.985); } to { opacity: 1; transform: none; } }
  @keyframes pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
  @keyframes bump { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
  @keyframes sway { 0% { transform: skewX(0); } 20% { transform: skewX(7deg); } 45% { transform: skewX(-5deg); } 70% { transform: skewX(3deg); } 100% { transform: skewX(0); } }
}
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content { height: 0; overflow: clip; transition: height 240ms ease, content-visibility 240ms allow-discrete; }
    .faq details[open]::details-content { height: auto; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Pages fade into each other, and the card's photo grows into the popup. */
  @view-transition { navigation: auto; }
  ::view-transition-group(saree-photo) {
    animation-duration: 340ms;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @supports (animation-timeline: view()) {
    /* A thread runs along the top bar as the page goes by. */
    .top::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--zari), var(--marigold));
      transform: scaleX(0);
      transform-origin: left;
      animation: thread-run linear both;
      animation-timeline: scroll(root);
    }
    @media (hover: none) {
      .grid .frame-in::after {
        opacity: 1;
        background: linear-gradient(115deg, rgba(255, 245, 214, 0) 38%, rgba(255, 245, 214, 0.6) 50%, rgba(255, 245, 214, 0) 62%);
        background-size: 300% 300%;
        animation: silk-shine linear both;
        animation-timeline: view();
      }
    }
  }
}
@keyframes thread-run { to { transform: scaleX(1); } }
@keyframes silk-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }