/* Biters Twickenham — layout after makhalal.co.uk, in the Biters menu colours and fonts */

:root {
  --orange: #ee5a1c;
  --orange-deep: #d14812;
  --amber: #f9921c;
  --yellow: #ffe012;
  --red: #bb2236;
  --green: #2f9e44;
  --ink: #111;
  --ink-2: #1d1d1d;
  --paper: #fff;
  --cream: #f7f2ea;
  --text: #1a1a1a;
  --muted: #5d5a55;
  --slab: "Alfa Slab One", Rockwell, "Courier New", serif;
  --display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1240px;
  --gutter: clamp(16px, 3vw, 30px);
  --header-h: 86px;
  --radius: 5px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .1 0 0 0 0 0 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .3 0 0 0 0 .06 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .16 0 0 0 0 .16 0 0 0 13 -8.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* @torn:start (generated by tools/build.py) */
:root {
  --torn-tag: polygon(0.0% 0.4px, 7.14% 2.5px, 14.29% 2.3px, 21.43% 0.8px, 28.57% 1.5px, 35.71% 1.3px, 42.86% 2.0px, 50.0% 2.4px, 57.14% 0.3px, 64.29% 0.1px, 71.43% 2.5px, 78.57% 1.3px, 85.71% 2.3px, 92.86% 0.0px, 100.0% 1.3px, calc(100% - 6.5px) 11.11%, calc(100% - 2.1px) 22.22%, calc(100% - 8.5px) 33.33%, calc(100% - 8.1px) 44.44%, calc(100% - 0.3px) 55.56%, calc(100% - 0.2px) 66.67%, calc(100% - 4.9px) 77.78%, calc(100% - 8.5px) 88.89%, 100.0% calc(100% - 1.1px), 92.86% calc(100% - 0.6px), 85.71% calc(100% - 1.3px), 78.57% calc(100% - 0.1px), 71.43% calc(100% - 0.7px), 64.29% calc(100% - 1.3px), 57.14% calc(100% - 1.5px), 50.0% calc(100% - 0.7px), 42.86% calc(100% - 0.7px), 35.71% calc(100% - 0.7px), 28.57% calc(100% - 1.4px), 21.43% calc(100% - 0.9px), 14.29% calc(100% - 0.1px), 7.14% calc(100% - 2.5px), 0.0% calc(100% - 1.7px), 5.8px 88.89%, 1.7px 77.78%, 8.9px 66.67%, 7.7px 55.56%, 1.1px 44.44%, 3.0px 33.33%, 6.5px 22.22%, 6.4px 11.11%);
  --torn-tag-2: polygon(0.0% 2.9px, 7.14% 2.8px, 14.29% 0.2px, 21.43% 0.3px, 28.57% 2.5px, 35.71% 2.2px, 42.86% 2.0px, 50.0% 0.9px, 57.14% 1.8px, 64.29% 1.8px, 71.43% 1.7px, 78.57% 0.5px, 85.71% 1.3px, 92.86% 1.2px, 100.0% 2.2px, calc(100% - 9.0px) 11.11%, calc(100% - 8.5px) 22.22%, calc(100% - 4.9px) 33.33%, calc(100% - 4.0px) 44.44%, calc(100% - 2.4px) 55.56%, calc(100% - 0.3px) 66.67%, calc(100% - 0.2px) 77.78%, calc(100% - 4.2px) 88.89%, 100.0% calc(100% - 1.0px), 92.86% calc(100% - 1.1px), 85.71% calc(100% - 2.7px), 78.57% calc(100% - 1.6px), 71.43% calc(100% - 1.7px), 64.29% calc(100% - 0.7px), 57.14% calc(100% - 0.1px), 50.0% calc(100% - 1.0px), 42.86% calc(100% - 0.4px), 35.71% calc(100% - 1.5px), 28.57% calc(100% - 3.0px), 21.43% calc(100% - 2.0px), 14.29% calc(100% - 0.5px), 7.14% calc(100% - 2.7px), 0.0% calc(100% - 2.4px), 6.6px 88.89%, 8.2px 77.78%, 6.9px 66.67%, 7.1px 55.56%, 3.2px 44.44%, 8.8px 33.33%, 8.7px 22.22%, 1.5px 11.11%);
  --torn-box: polygon(0.0% 1.9px, 3.33% 0.8px, 6.67% 3.2px, 10.0% 1.2px, 13.33% 0.5px, 16.67% 3.2px, 20.0% 7.3px, 23.33% 6.4px, 26.67% 6.1px, 30.0% 1.8px, 33.33% 4.3px, 36.67% 2.2px, 40.0% 1.4px, 43.33% 0.8px, 46.67% 1.7px, 50.0% 7.4px, 53.33% 6.6px, 56.67% 6.5px, 60.0% 6.4px, 63.33% 1.5px, 66.67% 2.5px, 70.0% 5.0px, 73.33% 5.9px, 76.67% 6.8px, 80.0% 7.0px, 83.33% 0.7px, 86.67% 4.8px, 90.0% 5.4px, 93.33% 4.0px, 96.67% 1.4px, 100.0% 3.8px, calc(100% - 0.7px) 5.56%, calc(100% - 7.5px) 11.11%, calc(100% - 6.9px) 16.67%, calc(100% - 4.4px) 22.22%, calc(100% - 2.4px) 27.78%, calc(100% - 7.3px) 33.33%, calc(100% - 4.6px) 38.89%, calc(100% - 7.1px) 44.44%, calc(100% - 6.8px) 50.0%, calc(100% - 4.1px) 55.56%, calc(100% - 3.3px) 61.11%, calc(100% - 4.8px) 66.67%, calc(100% - 3.4px) 72.22%, calc(100% - 1.3px) 77.78%, calc(100% - 2.4px) 83.33%, calc(100% - 6.5px) 88.89%, calc(100% - 0.3px) 94.44%, 100.0% calc(100% - 0.4px), 96.67% calc(100% - 5.0px), 93.33% calc(100% - 2.2px), 90.0% calc(100% - 4.3px), 86.67% calc(100% - 3.8px), 83.33% calc(100% - 2.7px), 80.0% calc(100% - 8.0px), 76.67% calc(100% - 1.6px), 73.33% calc(100% - 3.3px), 70.0% calc(100% - 1.6px), 66.67% calc(100% - 5.1px), 63.33% calc(100% - 2.2px), 60.0% calc(100% - 2.8px), 56.67% calc(100% - 6.0px), 53.33% calc(100% - 2.6px), 50.0% calc(100% - 4.5px), 46.67% calc(100% - 7.2px), 43.33% calc(100% - 0.8px), 40.0% calc(100% - 0.5px), 36.67% calc(100% - 1.8px), 33.33% calc(100% - 6.1px), 30.0% calc(100% - 4.9px), 26.67% calc(100% - 1.9px), 23.33% calc(100% - 2.6px), 20.0% calc(100% - 1.4px), 16.67% calc(100% - 3.7px), 13.33% calc(100% - 0.3px), 10.0% calc(100% - 5.6px), 6.67% calc(100% - 7.2px), 3.33% calc(100% - 7.6px), 0.0% calc(100% - 5.9px), 7.7px 94.44%, 0.1px 88.89%, 2.3px 83.33%, 7.7px 77.78%, 6.2px 72.22%, 3.3px 66.67%, 7.5px 61.11%, 5.0px 55.56%, 6.5px 50.0%, 2.3px 44.44%, 1.5px 38.89%, 3.6px 33.33%, 1.1px 27.78%, 3.1px 22.22%, 7.7px 16.67%, 2.7px 11.11%, 0.1px 5.56%);
  --torn-top: polygon(0.0% 8.3px, 1.67% 6.7px, 3.33% 2.5px, 5.0% 15.6px, 6.67% 0.1px, 8.33% 9.1px, 10.0% 16.2px, 11.67% 1.5px, 13.33% 10.0px, 15.0% 11.1px, 16.67% 0.7px, 18.33% 6.8px, 20.0% 12.7px, 21.67% 8.1px, 23.33% 13.1px, 25.0% 2.8px, 26.67% 4.3px, 28.33% 2.0px, 30.0% 9.1px, 31.67% 16.6px, 33.33% 10.6px, 35.0% 13.9px, 36.67% 6.9px, 38.33% 13.4px, 40.0% 1.8px, 41.67% 5.2px, 43.33% 12.1px, 45.0% 13.1px, 46.67% 7.6px, 48.33% 1.6px, 50.0% 4.8px, 51.67% 3.8px, 53.33% 5.1px, 55.0% 14.6px, 56.67% 3.6px, 58.33% 16.0px, 60.0% 15.8px, 61.67% 1.0px, 63.33% 6.8px, 65.0% 8.9px, 66.67% 0.4px, 68.33% 7.6px, 70.0% 16.3px, 71.67% 2.0px, 73.33% 10.7px, 75.0% 2.2px, 76.67% 10.4px, 78.33% 16.1px, 80.0% 3.7px, 81.67% 0.1px, 83.33% 1.5px, 85.0% 9.7px, 86.67% 0.3px, 88.33% 1.5px, 90.0% 8.9px, 91.67% 16.6px, 93.33% 7.6px, 95.0% 7.2px, 96.67% 11.5px, 98.33% 1.7px, 100.0% 10.4px, calc(100% - 0px) 12.5%, calc(100% - 0px) 25.0%, calc(100% - 0px) 37.5%, calc(100% - 0px) 50.0%, calc(100% - 0px) 62.5%, calc(100% - 0px) 75.0%, calc(100% - 0px) 87.5%, 100.0% calc(100% - 0px), 98.33% calc(100% - 0px), 96.67% calc(100% - 0px), 95.0% calc(100% - 0px), 93.33% calc(100% - 0px), 91.67% calc(100% - 0px), 90.0% calc(100% - 0px), 88.33% calc(100% - 0px), 86.67% calc(100% - 0px), 85.0% calc(100% - 0px), 83.33% calc(100% - 0px), 81.67% calc(100% - 0px), 80.0% calc(100% - 0px), 78.33% calc(100% - 0px), 76.67% calc(100% - 0px), 75.0% calc(100% - 0px), 73.33% calc(100% - 0px), 71.67% calc(100% - 0px), 70.0% calc(100% - 0px), 68.33% calc(100% - 0px), 66.67% calc(100% - 0px), 65.0% calc(100% - 0px), 63.33% calc(100% - 0px), 61.67% calc(100% - 0px), 60.0% calc(100% - 0px), 58.33% calc(100% - 0px), 56.67% calc(100% - 0px), 55.0% calc(100% - 0px), 53.33% calc(100% - 0px), 51.67% calc(100% - 0px), 50.0% calc(100% - 0px), 48.33% calc(100% - 0px), 46.67% calc(100% - 0px), 45.0% calc(100% - 0px), 43.33% calc(100% - 0px), 41.67% calc(100% - 0px), 40.0% calc(100% - 0px), 38.33% calc(100% - 0px), 36.67% calc(100% - 0px), 35.0% calc(100% - 0px), 33.33% calc(100% - 0px), 31.67% calc(100% - 0px), 30.0% calc(100% - 0px), 28.33% calc(100% - 0px), 26.67% calc(100% - 0px), 25.0% calc(100% - 0px), 23.33% calc(100% - 0px), 21.67% calc(100% - 0px), 20.0% calc(100% - 0px), 18.33% calc(100% - 0px), 16.67% calc(100% - 0px), 15.0% calc(100% - 0px), 13.33% calc(100% - 0px), 11.67% calc(100% - 0px), 10.0% calc(100% - 0px), 8.33% calc(100% - 0px), 6.67% calc(100% - 0px), 5.0% calc(100% - 0px), 3.33% calc(100% - 0px), 1.67% calc(100% - 0px), 0.0% calc(100% - 0px), 0px 87.5%, 0px 75.0%, 0px 62.5%, 0px 50.0%, 0px 37.5%, 0px 25.0%, 0px 12.5%);
  --torn-bottom: polygon(0.0% 0px, 1.67% 0px, 3.33% 0px, 5.0% 0px, 6.67% 0px, 8.33% 0px, 10.0% 0px, 11.67% 0px, 13.33% 0px, 15.0% 0px, 16.67% 0px, 18.33% 0px, 20.0% 0px, 21.67% 0px, 23.33% 0px, 25.0% 0px, 26.67% 0px, 28.33% 0px, 30.0% 0px, 31.67% 0px, 33.33% 0px, 35.0% 0px, 36.67% 0px, 38.33% 0px, 40.0% 0px, 41.67% 0px, 43.33% 0px, 45.0% 0px, 46.67% 0px, 48.33% 0px, 50.0% 0px, 51.67% 0px, 53.33% 0px, 55.0% 0px, 56.67% 0px, 58.33% 0px, 60.0% 0px, 61.67% 0px, 63.33% 0px, 65.0% 0px, 66.67% 0px, 68.33% 0px, 70.0% 0px, 71.67% 0px, 73.33% 0px, 75.0% 0px, 76.67% 0px, 78.33% 0px, 80.0% 0px, 81.67% 0px, 83.33% 0px, 85.0% 0px, 86.67% 0px, 88.33% 0px, 90.0% 0px, 91.67% 0px, 93.33% 0px, 95.0% 0px, 96.67% 0px, 98.33% 0px, 100.0% 0px, calc(100% - 0px) 12.5%, calc(100% - 0px) 25.0%, calc(100% - 0px) 37.5%, calc(100% - 0px) 50.0%, calc(100% - 0px) 62.5%, calc(100% - 0px) 75.0%, calc(100% - 0px) 87.5%, 100.0% calc(100% - 10.3px), 98.33% calc(100% - 7.7px), 96.67% calc(100% - 10.4px), 95.0% calc(100% - 3.7px), 93.33% calc(100% - 14.6px), 91.67% calc(100% - 14.8px), 90.0% calc(100% - 11.8px), 88.33% calc(100% - 2.9px), 86.67% calc(100% - 9.4px), 85.0% calc(100% - 5.9px), 83.33% calc(100% - 4.5px), 81.67% calc(100% - 17.2px), 80.0% calc(100% - 17.9px), 78.33% calc(100% - 0.8px), 76.67% calc(100% - 15.5px), 75.0% calc(100% - 10.9px), 73.33% calc(100% - 6.9px), 71.67% calc(100% - 5.1px), 70.0% calc(100% - 12.1px), 68.33% calc(100% - 8.2px), 66.67% calc(100% - 12.3px), 65.0% calc(100% - 11.9px), 63.33% calc(100% - 2.4px), 61.67% calc(100% - 13.8px), 60.0% calc(100% - 17.7px), 58.33% calc(100% - 17.4px), 56.67% calc(100% - 11.0px), 55.0% calc(100% - 0.8px), 53.33% calc(100% - 0.1px), 51.67% calc(100% - 2.4px), 50.0% calc(100% - 16.9px), 48.33% calc(100% - 5.5px), 46.67% calc(100% - 6.6px), 45.0% calc(100% - 16.2px), 43.33% calc(100% - 5.7px), 41.67% calc(100% - 9.9px), 40.0% calc(100% - 7.8px), 38.33% calc(100% - 1.2px), 36.67% calc(100% - 10.5px), 35.0% calc(100% - 15.2px), 33.33% calc(100% - 2.8px), 31.67% calc(100% - 4.0px), 30.0% calc(100% - 7.4px), 28.33% calc(100% - 0.7px), 26.67% calc(100% - 8.9px), 25.0% calc(100% - 14.7px), 23.33% calc(100% - 11.8px), 21.67% calc(100% - 9.6px), 20.0% calc(100% - 15.4px), 18.33% calc(100% - 2.7px), 16.67% calc(100% - 10.2px), 15.0% calc(100% - 6.7px), 13.33% calc(100% - 10.8px), 11.67% calc(100% - 2.0px), 10.0% calc(100% - 14.0px), 8.33% calc(100% - 1.7px), 6.67% calc(100% - 3.0px), 5.0% calc(100% - 14.5px), 3.33% calc(100% - 17.1px), 1.67% calc(100% - 7.8px), 0.0% calc(100% - 7.5px), 0px 87.5%, 0px 75.0%, 0px 62.5%, 0px 50.0%, 0px 37.5%, 0px 25.0%, 0px 12.5%);
  --torn-y: polygon(0.0% 4.1px, 1.67% 17.3px, 3.33% 2.3px, 5.0% 12.7px, 6.67% 1.5px, 8.33% 4.5px, 10.0% 18.0px, 11.67% 3.8px, 13.33% 11.6px, 15.0% 8.3px, 16.67% 8.2px, 18.33% 8.9px, 20.0% 3.5px, 21.67% 14.9px, 23.33% 1.6px, 25.0% 4.2px, 26.67% 0.4px, 28.33% 4.8px, 30.0% 7.3px, 31.67% 16.2px, 33.33% 6.8px, 35.0% 2.0px, 36.67% 4.7px, 38.33% 17.8px, 40.0% 1.1px, 41.67% 11.2px, 43.33% 6.8px, 45.0% 11.9px, 46.67% 6.1px, 48.33% 12.4px, 50.0% 9.0px, 51.67% 11.7px, 53.33% 16.2px, 55.0% 10.5px, 56.67% 2.6px, 58.33% 1.2px, 60.0% 17.0px, 61.67% 8.8px, 63.33% 3.5px, 65.0% 17.0px, 66.67% 10.4px, 68.33% 13.1px, 70.0% 15.9px, 71.67% 5.1px, 73.33% 6.4px, 75.0% 15.8px, 76.67% 2.4px, 78.33% 13.8px, 80.0% 1.8px, 81.67% 12.4px, 83.33% 12.6px, 85.0% 17.1px, 86.67% 15.2px, 88.33% 9.1px, 90.0% 3.6px, 91.67% 2.7px, 93.33% 9.5px, 95.0% 9.2px, 96.67% 1.3px, 98.33% 16.3px, 100.0% 9.1px, calc(100% - 0px) 12.5%, calc(100% - 0px) 25.0%, calc(100% - 0px) 37.5%, calc(100% - 0px) 50.0%, calc(100% - 0px) 62.5%, calc(100% - 0px) 75.0%, calc(100% - 0px) 87.5%, 100.0% calc(100% - 12.6px), 98.33% calc(100% - 4.0px), 96.67% calc(100% - 4.4px), 95.0% calc(100% - 0.2px), 93.33% calc(100% - 6.2px), 91.67% calc(100% - 4.8px), 90.0% calc(100% - 7.6px), 88.33% calc(100% - 6.8px), 86.67% calc(100% - 15.0px), 85.0% calc(100% - 16.0px), 83.33% calc(100% - 3.2px), 81.67% calc(100% - 7.1px), 80.0% calc(100% - 3.0px), 78.33% calc(100% - 11.9px), 76.67% calc(100% - 17.5px), 75.0% calc(100% - 3.6px), 73.33% calc(100% - 13.8px), 71.67% calc(100% - 5.4px), 70.0% calc(100% - 0.2px), 68.33% calc(100% - 13.8px), 66.67% calc(100% - 6.2px), 65.0% calc(100% - 3.1px), 63.33% calc(100% - 7.8px), 61.67% calc(100% - 4.2px), 60.0% calc(100% - 7.4px), 58.33% calc(100% - 8.0px), 56.67% calc(100% - 7.5px), 55.0% calc(100% - 10.6px), 53.33% calc(100% - 5.2px), 51.67% calc(100% - 1.7px), 50.0% calc(100% - 1.5px), 48.33% calc(100% - 1.9px), 46.67% calc(100% - 9.4px), 45.0% calc(100% - 6.5px), 43.33% calc(100% - 14.5px), 41.67% calc(100% - 9.1px), 40.0% calc(100% - 12.7px), 38.33% calc(100% - 17.6px), 36.67% calc(100% - 1.1px), 35.0% calc(100% - 0.3px), 33.33% calc(100% - 2.5px), 31.67% calc(100% - 7.0px), 30.0% calc(100% - 10.3px), 28.33% calc(100% - 13.4px), 26.67% calc(100% - 6.3px), 25.0% calc(100% - 17.4px), 23.33% calc(100% - 0.1px), 21.67% calc(100% - 15.0px), 20.0% calc(100% - 3.8px), 18.33% calc(100% - 15.8px), 16.67% calc(100% - 0.6px), 15.0% calc(100% - 17.4px), 13.33% calc(100% - 13.7px), 11.67% calc(100% - 17.8px), 10.0% calc(100% - 10.4px), 8.33% calc(100% - 3.2px), 6.67% calc(100% - 17.5px), 5.0% calc(100% - 7.9px), 3.33% calc(100% - 1.5px), 1.67% calc(100% - 10.9px), 0.0% calc(100% - 8.9px), 0px 87.5%, 0px 75.0%, 0px 62.5%, 0px 50.0%, 0px 37.5%, 0px 25.0%, 0px 12.5%);
  --torn-edge: polygon(0.0% 6.3px, 2.5% 7.8px, 5.0% 12.9px, 7.5% 6.5px, 10.0% 7.1px, 12.5% 8.2px, 15.0% 2.6px, 17.5% 7.2px, 20.0% 8.8px, 22.5% 11.1px, 25.0% 1.3px, 27.5% 4.2px, 30.0% 1.3px, 32.5% 11.3px, 35.0% 9.7px, 37.5% 0.6px, 40.0% 13.8px, 42.5% 13.5px, 45.0% 9.2px, 47.5% 8.6px, 50.0% 2.2px, 52.5% 0.2px, 55.0% 7.4px, 57.5% 0.8px, 60.0% 2.7px, 62.5% 3.4px, 65.0% 0.4px, 67.5% 6.5px, 70.0% 6.2px, 72.5% 11.8px, 75.0% 7.3px, 77.5% 9.0px, 80.0% 7.0px, 82.5% 9.3px, 85.0% 6.4px, 87.5% 3.9px, 90.0% 14.0px, 92.5% 13.9px, 95.0% 11.8px, 97.5% 9.9px, 100.0% 4.4px, calc(100% - 0px) 12.5%, calc(100% - 0px) 25.0%, calc(100% - 0px) 37.5%, calc(100% - 0px) 50.0%, calc(100% - 0px) 62.5%, calc(100% - 0px) 75.0%, calc(100% - 0px) 87.5%, 100.0% calc(100% - 0px), 97.5% calc(100% - 0px), 95.0% calc(100% - 0px), 92.5% calc(100% - 0px), 90.0% calc(100% - 0px), 87.5% calc(100% - 0px), 85.0% calc(100% - 0px), 82.5% calc(100% - 0px), 80.0% calc(100% - 0px), 77.5% calc(100% - 0px), 75.0% calc(100% - 0px), 72.5% calc(100% - 0px), 70.0% calc(100% - 0px), 67.5% calc(100% - 0px), 65.0% calc(100% - 0px), 62.5% calc(100% - 0px), 60.0% calc(100% - 0px), 57.5% calc(100% - 0px), 55.0% calc(100% - 0px), 52.5% calc(100% - 0px), 50.0% calc(100% - 0px), 47.5% calc(100% - 0px), 45.0% calc(100% - 0px), 42.5% calc(100% - 0px), 40.0% calc(100% - 0px), 37.5% calc(100% - 0px), 35.0% calc(100% - 0px), 32.5% calc(100% - 0px), 30.0% calc(100% - 0px), 27.5% calc(100% - 0px), 25.0% calc(100% - 0px), 22.5% calc(100% - 0px), 20.0% calc(100% - 0px), 17.5% calc(100% - 0px), 15.0% calc(100% - 0px), 12.5% calc(100% - 0px), 10.0% calc(100% - 0px), 7.5% calc(100% - 0px), 5.0% calc(100% - 0px), 2.5% calc(100% - 0px), 0.0% calc(100% - 0px), 0px 87.5%, 0px 75.0%, 0px 62.5%, 0px 50.0%, 0px 37.5%, 0px 25.0%, 0px 12.5%);
}
/* @torn:end */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 64px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--cream) url("../img/tex-paper.jpg");
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
svg { width: 1em; height: 1em; flex: none; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--yellow); color: var(--ink); padding: 10px 16px; font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- textured grounds ---------- */
.tex-cream { background: var(--cream) url("../img/tex-paper.jpg"); }
.tex-check { background: var(--cream) url("../img/tex-check.jpg"); }
.tex-orange { background: var(--orange) var(--grain-orange); color: #fff; }

/* ---------- sticker headings (outlined, drop shadow, as on the makhalal posters) ---------- */
.stk {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  --o: 3px;
  --oc: var(--ink);
  --sc: var(--orange);
  text-shadow:
    var(--o) 0 0 var(--oc), calc(var(--o) * -1) 0 0 var(--oc), 0 var(--o) 0 var(--oc), 0 calc(var(--o) * -1) 0 var(--oc),
    var(--o) var(--o) 0 var(--oc), calc(var(--o) * -1) calc(var(--o) * -1) 0 var(--oc),
    var(--o) calc(var(--o) * -1) 0 var(--oc), calc(var(--o) * -1) var(--o) 0 var(--oc),
    calc(var(--o) * 2.4) calc(var(--o) * 2.4) 0 var(--sc);
}
.stk--orange { color: var(--orange); --sc: var(--ink); }
.stk--sm { font-size: clamp(1.7rem, 2.6vw, 2.2rem); --o: 2px; }
.stk--md { font-size: clamp(2.4rem, 4vw, 3.2rem); }
.stk--lg { font-size: clamp(2.8rem, 5.4vw, 4.6rem); }
.stk--xl { font-size: clamp(3.4rem, 7vw, 6rem); --o: 4px; }

/* torn black brush label, as on the menu boards */
.tag {
  display: inline-block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.3rem);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  padding: .2em .55em .12em;
  clip-path: var(--torn-tag);
}
.tag__accent { color: var(--amber); }
.section-tag { display: table; margin: 0 auto 44px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 52px;
  padding: .6em 1.6em .5em;
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius);
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn svg { width: .85em; height: .85em; }
.btn:hover { transform: translateY(-2px); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #2c2c2c; }
.btn--orange { background: var(--orange); color: #fff; box-shadow: 0 5px 0 var(--ink); }
.btn--orange:hover { background: var(--orange-deep); }
.btn--cream { background: var(--paper); color: var(--ink); box-shadow: 0 5px 0 var(--ink); }
.btn--cream:hover { background: var(--yellow); }
.btn--sm { min-height: 44px; font-size: 1.2rem; padding: .5em 1.2em .42em; }
.btn--lg { min-height: 64px; font-size: 1.6rem; padding: .6em 2.4em .5em; }
.btn--block { display: flex; width: 100%; }
.btn--badge { border-radius: 10px; min-height: 58px; padding-inline: 1.6em; }

/* ---------- header (logo · nav · menu button) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
.brand { position: relative; z-index: 5; align-self: flex-start; margin-top: 8px; }
.brand img { width: 116px; height: 116px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.3)); transition: transform .2s ease; }
.brand:hover img { transform: rotate(-6deg); }
.nav ul { display: flex; gap: clamp(18px, 3vw, 36px); }
.nav a {
  font-family: var(--display);
  font-size: 1.55rem;
  letter-spacing: .05em;
  text-decoration: none;
  color: var(--ink);
  padding: 4px 0;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--orange); }
.site-header__actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent;
  color: var(--ink);
  border: 0;
}
.nav-toggle svg { width: 28px; height: 28px; }

.drawer { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); }
.drawer[hidden] { display: none; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(360px, 88vw);
  background: var(--orange) var(--grain-orange);
  color: #fff;
  padding: 84px 28px 28px;
  display: flex; flex-direction: column; gap: 22px;
  animation: drawer-in .25s ease;
}
@keyframes drawer-in { from { transform: translateX(100%); } }
.drawer__close { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; background: transparent; border: 0; color: #fff; }
.drawer__close svg { width: 28px; height: 28px; }
.drawer__links a { display: block; font-family: var(--display); font-size: 2.6rem; letter-spacing: .04em; text-decoration: none; padding: 2px 0; }
.drawer__links a[aria-current="page"] { color: var(--ink); }
.drawer__panel .btn--orange { background: var(--ink); box-shadow: none; }
.drawer__note { font-size: .9rem; text-align: center; }

/* ---------- hero (giant outlined wordmark behind the food, tags scattered round) ---------- */
.hero {
  position: relative;
  z-index: 2;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(rgba(120,30,0,.14) 1.1px, transparent 1.7px) 0 0 / 7px 7px,
    radial-gradient(ellipse 70% 80% at 50% 45%, rgba(255,140,60,.25), transparent 70%),
    var(--orange);
  clip-path: var(--torn-bottom);
  margin-bottom: -18px;
  padding: 34px 0 80px;
}
.hero__word {
  font-family: var(--display);
  font-size: clamp(8rem, 27vw, 25rem);
  line-height: .78;
  letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 3px var(--ink);
  user-select: none;
}
.hero__stage { position: relative; width: min(100% - 2 * var(--gutter), 1180px); margin: clamp(-15rem, -15vw, -5rem) auto 0; }
.hero__img { position: relative; z-index: 1; width: min(76%, 680px); margin: 0 auto; filter: drop-shadow(0 30px 30px rgba(80,20,0,.45)); }
.hero__tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__tag {
  position: absolute;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.1vw, 2rem);
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
  padding: .35em .75em .25em;
  clip-path: var(--torn-tag);
}
.hero__tag--1 { left: 0; top: 16%; background: var(--ink); color: #fff; transform: rotate(-6deg); }
.hero__tag--2 { right: 0; top: 10%; background: var(--yellow); color: var(--ink); transform: rotate(5deg); }
.hero__tag--3 { left: 6%; top: 48%; background: #fff; color: var(--ink); transform: rotate(4deg); }
.hero__tag--4 { right: 4%; top: 44%; background: var(--ink); color: #fff; transform: rotate(-4deg); clip-path: var(--torn-tag-2); }
.hero__tag--5 { left: 1%; bottom: 10%; background: var(--yellow); color: var(--ink); transform: rotate(-3deg); clip-path: var(--torn-tag-2); }
.hero__tag--6 { right: 8%; bottom: 8%; background: var(--green); color: #fff; transform: rotate(-5deg); }
.hero__ctas { position: relative; z-index: 3; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.hero__ctas .btn--dark { box-shadow: 0 5px 0 rgba(0,0,0,.25); }

/* ---------- banner (orange halftone, black slab box, cream ribbon) ---------- */
.banner {
  position: relative;
  z-index: 2;
  color: #fff;
  background:
    radial-gradient(rgba(120,30,0,.14) 1.1px, transparent 1.7px) 0 0 / 7px 7px,
    radial-gradient(ellipse 80% 90% at 30% 40%, rgba(255,140,60,.22), transparent 70%),
    var(--orange);
  clip-path: var(--torn-bottom);
  margin-bottom: -18px;
  overflow: hidden;
}
.banner__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 30px;
  min-height: clamp(540px, 74vh, 660px);
  padding-top: 0;
  padding-bottom: 70px;
}
.banner__copy { --btn-h: 58px; --rib-h: 54px; --rib-bottom: 108px; align-self: start; position: relative; display: flex; flex-direction: column; align-items: center; padding-bottom: 34px; }
.banner__box {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
  max-width: 560px;
  background: #282828;
  padding: 46px 30px 112px;
  font-weight: 400;
}
.slab {
  display: block;
  font-family: var(--slab);
  font-weight: 400;
  font-size: clamp(2.9rem, 6.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #f3eee1;
  background: var(--speckle), #f3eee1;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.slab--orange { color: var(--orange); background: var(--speckle), var(--orange); -webkit-background-clip: text; background-clip: text; }
.banner__ribbon {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--rib-bottom);
  width: 240vw;
  margin-left: -120vw;
  height: var(--rib-h);
  line-height: calc(var(--rib-h) + 2px);
  white-space: nowrap;
  padding: 0 1.2em;
  text-align: center;
  font-family: var(--slab);
  font-size: clamp(1.15rem, 2.2vw, 1.8rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #282828;
  background: #f6f0e3;
  transform: rotate(-3deg);
  transform-origin: center;
}
.banner__ribbon em { font-style: normal; color: var(--orange); }
.banner__btn {
  position: relative;
  z-index: 3;
  margin-top: -22px;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--btn-h);
  min-width: 240px;
  padding: .12em 1.6em 0;
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--orange);
  background: #f6f0e3;
  clip-path: polygon(0 6%, 100% 0, 99% 100%, 1% 94%);
  transform: rotate(-1.5deg);
  transition: background .15s, color .15s;
}
.banner__btn:hover { background: #fff; color: var(--orange-deep); }
.banner__media { position: relative; z-index: 3; display: grid; place-items: center; }
.banner__img { width: 100%; max-width: 620px; filter: drop-shadow(0 24px 28px rgba(0,0,0,.25)); }
.banner__img--cutout { max-width: 680px; filter: drop-shadow(0 30px 30px rgba(80,20,0,.4)); }
.banner__halal { position: absolute; right: 2%; top: 2%; transform: rotate(10deg); z-index: 2; }
.banner__halal .halal-badge { width: 104px; height: 104px; }
.banner__halal .halal-badge__ar { font-size: 1.9rem; }
.banner__halal .halal-badge__en { font-size: .8rem; }

/* ---------- deals (wall) ---------- */
.offers { padding: 80px 0 60px; }
.offers .section-tag { margin-bottom: 30px; }
.offers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.deal-box {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--ink);
  color: #fff;
  padding: 40px 36px 38px;
  clip-path: var(--torn-box);
}
.deal-box__kicker { font-family: var(--display); font-size: 2.1rem; letter-spacing: .05em; line-height: 1; color: var(--amber); }
.deal-box__price { font-family: var(--display); font-size: clamp(3.8rem, 6vw, 5.2rem); line-height: .95; margin: 6px 0 10px; }
.deal-box__text { font-weight: 600; font-size: .98rem; max-width: 24em; }
.deal-box--orange { background: var(--orange) var(--grain-orange); }
.deal-box--orange .deal-box__kicker { color: var(--ink); }

/* ---------- posters (white doodles, like the menu backdrop) ---------- */
.posters { padding: 100px 0 80px; position: relative; }
.posters .section-tag { margin-bottom: 44px; }
.posters__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.poster {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  background: var(--cream);
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.poster:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -14px rgba(0,0,0,.4); }
.poster__media { position: relative; display: block; padding: 8% 7% 0; }
.poster__top {
  position: absolute; left: 0; right: 0; top: 0; height: 82%;
  background: url("../img/doodles-orange.svg"), var(--orange) var(--grain-orange);
  clip-path: var(--torn-bottom);
}
.poster__img {
  position: relative;
  display: block;
  width: 100%;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.poster__img.is-photo { aspect-ratio: 520 / 400; border-radius: 8px; object-fit: cover; }
.poster__img:not(.is-photo) { filter: drop-shadow(0 16px 16px rgba(80,20,0,.35)); }
.poster:hover .poster__img { transform: scale(1.04) rotate(-1.5deg); }
.poster__foot { display: grid; gap: 12px; padding: 18px 7% 26px; flex: 1; align-content: start; }
.poster__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.poster .stk--sm { font-size: clamp(1.9rem, 2.5vw, 2.5rem); }
.poster__tag {
  flex: none;
  max-width: 52%;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  line-height: 1;
  letter-spacing: .03em;
  text-align: center;
  color: var(--ink);
  background: var(--yellow);
  padding: .45em .8em .35em;
  clip-path: var(--torn-tag);
  transform: rotate(-5deg);
}
.poster--bleed .poster__media { padding: 0; }
.poster--bleed .poster__img { margin-bottom: 4%; }
.poster--bleed:hover .poster__img { transform: scale(1.03); }
.poster__desc { font-size: .93rem; line-height: 1.5; color: var(--muted); }

.info-box {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px;
  padding: 56px 30px 34px 26px;
  text-align: center;
  color: #e9e4dc;
  background: var(--ink) var(--grain-light);
  clip-path: var(--torn-box);
}
.info-box__side {
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  font-size: 1.7rem;
  letter-spacing: .1em;
  color: #fff;
  background: var(--orange);
  padding: .6em .25em;
  clip-path: var(--torn-tag);
}
.info-box__body { display: flex; flex-direction: column; align-items: center; }
.info-box__title { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 2.3vw, 2.35rem); line-height: .95; letter-spacing: .02em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.info-box p { font-size: .98rem; line-height: 1.6; }
.info-box strong { color: #fff; font-weight: 600; }
.info-box .btn { margin-top: 24px; box-shadow: none; }

/* ---------- rewards (wall, app-download layout) ---------- */
.rewards { padding: 90px 0; }
.rewards__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center; }
.rewards__brand { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.rewards__brand img { width: 96px; height: 96px; }
.rewards__title { display: grid; gap: 10px; margin-bottom: 22px; }
.rewards__text { max-width: 34em; font-weight: 500; margin-bottom: 18px; }
.rewards__wallet { display: flex; align-items: center; gap: 12px; max-width: 34em; margin-bottom: 28px; padding: 12px 16px; background: #fff; border-left: 4px solid var(--orange); border-radius: var(--radius); font-size: .95rem; font-weight: 500; }
.rewards__wallet svg { width: 28px; height: 28px; color: var(--orange); }
.rewards__wallet b { font-weight: 700; }
.rewards__phone { display: grid; place-items: center; }
.phone {
  width: min(320px, 78vw);
  padding: 12px;
  background: var(--ink);
  border-radius: 44px;
  box-shadow: 14px 14px 0 var(--orange);
  transform: rotate(3deg);
}
.phone__screen { border-radius: 34px; overflow: hidden; background: #1b1b1b var(--grain-light); padding: 14px 16px 22px; display: grid; gap: 16px; align-content: start; }
.phone__bar { display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: .72rem; font-weight: 600; padding: 2px 8px 4px; }
.phone__notch { width: 74px; height: 20px; border-radius: 12px; background: #000; }
.rcard { background: var(--orange) var(--grain-orange); border-radius: 18px; padding: 18px 16px 18px; color: #fff; box-shadow: 0 12px 24px -10px rgba(0,0,0,.6); }
.rcard__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rcard__head img { width: 46px; height: 46px; }
.rcard__brand { font-family: var(--display); font-size: 1.6rem; line-height: 1; letter-spacing: .04em; }
.rcard__shop { font-size: .72rem; font-weight: 600; opacity: .85; }
.rcard__count { font-family: var(--display); font-size: 1.15rem; letter-spacing: .05em; margin-bottom: 10px; }
.rcard__count b { font-weight: 400; font-size: 1.6rem; color: var(--yellow); }
.rcard__stamps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.stamp { aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(255,255,255,.65); display: grid; place-items: center; }
.stamp--on { border: 0; background: #111; box-shadow: inset 0 0 0 3px rgba(255,255,255,.9); transform: rotate(-8deg); }
.stamp--on:nth-child(even) { transform: rotate(10deg); }
.stamp--on img { width: 82%; height: 82%; }
.rcard__bar { height: 8px; border-radius: 4px; background: rgba(0,0,0,.25); overflow: hidden; margin-bottom: 10px; }
.rcard__bar span { display: block; height: 100%; background: var(--yellow); border-radius: 4px; }
.rcard__reward { font-size: .78rem; line-height: 1.4; }
.rcard__reward b { font-weight: 700; }


/* ---------- orange strip (social strip on makhalal) ---------- */
.strip {
  position: relative;
  z-index: 2;
  background: var(--orange) var(--grain-orange);
  color: #fff;
  clip-path: var(--torn-y);
  margin: -14px 0;
  padding: 44px 0;
}
.strip__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 26px; text-align: center; }
.strip .stk { --sc: var(--ink); }
.strip__text { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: .05em; }

/* ---------- visit (franchise / map layout) ---------- */
.visit { padding: 110px 0 120px; }
.visit__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center; }
.visit__hours-title { font-family: var(--display); font-weight: 400; font-size: 1.9rem; letter-spacing: .05em; margin-bottom: 10px; }
.visit__hours .hours { margin-bottom: 0; }
.visit__title { display: grid; gap: 6px; margin-bottom: 20px; }
.visit__text { font-weight: 600; margin-bottom: 22px; }
.hours { display: grid; margin-bottom: 34px; max-width: 440px; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); padding: 6px 18px; box-shadow: 6px 6px 0 var(--ink); }
.hours li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed #cfc8bd; }
.hours li:last-child { border-bottom: 0; }
.hours li.is-today { color: var(--orange-deep); font-weight: 700; }

/* ---------- footer (sunburst) ---------- */
.site-footer {
  position: relative;
  color: #ddd;
  background: var(--ink) var(--grain-light);
  clip-path: var(--torn-top);
  margin-top: -16px;
  padding: 84px 0 0;
}
.site-footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 30px;
  background: var(--orange) var(--grain-orange);
  clip-path: var(--torn-bottom);
}
.site-footer__inner { display: flex; gap: 50px; align-items: flex-start; }
.site-footer__logo img { width: 200px; height: 200px; }
.site-footer__cols { flex: 1; display: grid; grid-template-columns: .8fr 1.2fr 1fr; gap: 40px; }
.site-footer__title { font-family: var(--display); font-weight: 400; font-size: 1.7rem; letter-spacing: .06em; color: #fff; margin-bottom: 12px; }
.site-footer__links { display: grid; gap: 6px; }
.site-footer__links a { text-decoration: none; font-weight: 600; color: #fff; }
.site-footer__links a:hover, .site-footer__rewards:hover { color: var(--orange); }
.hours--footer { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
.hours--footer li { padding: 5px 0; border-color: #3a3a3a; font-size: .92rem; }
.hours--footer li.is-today { color: var(--amber); }
.site-footer__phone a { font-family: var(--display); font-size: 2.2rem; letter-spacing: .04em; color: #fff; text-decoration: none; }
.site-footer__phone a:hover { color: var(--orange); }
.site-footer p + p { margin-top: 10px; font-size: .95rem; }
.site-footer__rewards { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #fff; text-decoration: none; }
.site-footer__base { margin-top: 50px; padding-top: 20px; padding-bottom: 26px; border-top: 1px solid #333; font-size: .85rem; color: #999; }

/* ---------- stock photo preview (tools/stock.py) ---------- */
img.is-photo { object-fit: cover; border-radius: 10px; filter: none; box-shadow: 0 14px 30px -12px rgba(0,0,0,.45); }
.banner__img.is-photo { aspect-ratio: 1100 / 864; border: 5px solid #fff; transform: rotate(2deg); }
.poster__img.is-photo { aspect-ratio: 520 / 400; border-radius: 8px; }
.menu-sec__img .is-photo { aspect-ratio: 560 / 440; }

/* ---------- halal badge ---------- */
.halal-badge {
  display: inline-grid;
  place-items: center;
  align-content: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--green);
  line-height: 1;
  flex: none;
}
.halal-badge__ar { font-family: "Geeza Pro", "Noto Naskh Arabic", "Arial", sans-serif; font-size: 1.35rem; font-weight: 700; }
.halal-badge__en { font-family: var(--body); font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }

/* ---------- menu page ---------- */
.banner--menu .banner__inner { min-height: 0; padding-bottom: 56px; }
.banner--menu .banner__img { max-width: 520px; }
.banner--menu .banner__box { max-width: 420px; }
.banner--menu .banner__inner { grid-template-columns: 1fr; justify-items: center; }
.banner--menu .banner__copy { width: min(100%, 520px); }

.menu-nav { position: sticky; top: var(--header-h); z-index: 30; background: var(--ink); }
.menu-nav__list { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0; scrollbar-width: none; scroll-snap-type: x proximity; }
.menu-nav__list::-webkit-scrollbar { display: none; }
.menu-nav__list a {
  display: block;
  white-space: nowrap;
  font-family: var(--display); font-size: 1.25rem; letter-spacing: .05em;
  text-decoration: none;
  color: #fff;
  background: #2a2a2a;
  padding: .45em .9em .32em;
  border-radius: var(--radius);
  scroll-snap-align: start;
  transition: background .15s;
}
.menu-nav__list a:hover { background: #3a3a3a; }
.menu-nav__list a.is-active { background: var(--orange); }

.menu-sec { position: relative; padding: clamp(64px, 8vw, 96px) 0; }
.menu-sec.tex-orange { z-index: 1; clip-path: var(--torn-y); margin: -16px 0; padding: clamp(80px, 9vw, 110px) 0; }
.menu-sec__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 34px; }
.menu-sec__intro { font-weight: 600; }
.menu-sec__body { display: grid; gap: 44px; }
.menu-sec__img img { width: 100%; max-width: 460px; margin: 0 auto; }

.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.item { padding: 13px 0; border-bottom: 2px dashed rgba(0,0,0,.14); }
.tex-orange .item { border-color: rgba(255,255,255,.35); }
.items--dense .item { padding: 9px 0; }
.item__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.item__name { font-family: var(--body); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.35; }
.item__note { font-weight: 500; text-transform: none; font-size: .88rem; opacity: .8; }
.item__price { font-weight: 700; font-size: 1.1rem; white-space: nowrap; color: var(--red); }
.tex-orange .item__price { color: var(--yellow); }
.item__price--multi { display: inline-flex; gap: 14px; }
.item__price--multi small { font-size: .7rem; font-weight: 700; margin-right: 4px; opacity: .85; text-transform: uppercase; }
.item__desc { margin-top: 2px; font-size: .92rem; color: var(--muted); }
.tex-orange .item__desc { color: #fff3ea; }

.pizza-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.pizza-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; }
.pizza { padding: 11px 0; border-bottom: 2px dashed rgba(0,0,0,.14); }
.pizza__name { font-family: var(--body); font-weight: 700; font-size: 1rem; }
.pizza__no { color: var(--orange); }
.pizza__desc { font-size: .9rem; color: var(--muted); }
.pizza-side { position: sticky; top: calc(var(--header-h) + 90px); display: grid; gap: 24px; }
.pizza-sizes { background: var(--orange) var(--grain-orange); color: #fff; padding: 24px 30px; clip-path: var(--torn-box); }
.pizza-sizes li { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); font-size: 2.4rem; line-height: 1.15; letter-spacing: .02em; }
.pizza-sizes strong { font-weight: 400; color: var(--yellow); }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-footer__inner { flex-direction: column; gap: 30px; }
  .site-footer__logo img { width: 130px; height: 130px; }
  .offers__grid { grid-template-columns: 1fr 1fr; }
  .deal-box--big { grid-column: 1 / -1; }
  .posters__grid { grid-template-columns: repeat(2, 1fr); }
  .pizza-layout { grid-template-columns: 1fr; }
  .pizza-side { position: static; grid-template-columns: 1fr 1fr; align-items: center; order: -1; }
}

@media (max-width: 760px) {
  :root { --header-h: 70px; }
  .brand { margin-top: 6px; }
  .brand img { width: 82px; height: 82px; }
  .header-cta { display: none; }
  .hero { padding: 26px 0 60px; }
  .hero__word { -webkit-text-stroke: 2px var(--ink); }
  .hero__stage { margin-top: -18vw; }
  .hero__img { width: 92%; }
  .hero__tags { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; margin-top: 14px; }
  .hero__tag { position: static; font-size: 1.15rem; transform: rotate(-2deg) !important; }
  .hero__tag:nth-child(even) { transform: rotate(2deg) !important; }
  .info-box { gap: 16px; padding: 50px 22px 30px 18px; }
  .info-box__side { font-size: 1.4rem; }
  .banner__inner { grid-template-columns: 1fr; padding-top: 0; padding-bottom: 54px; gap: 26px; min-height: 0; }
  .banner__box { width: 88%; max-width: 360px; }
  .banner__img { max-width: 420px; }
  .banner__copy { --btn-h: 54px; --rib-h: 40px; --rib-bottom: 104px; }
  .banner__box { padding: 30px 16px 92px; }
  .slab { font-size: clamp(2.3rem, 11.5vw, 3.6rem); }
  .banner__ribbon { font-size: 1rem; }
  .banner__btn { min-width: 200px; }
  .banner__halal .halal-badge { width: 76px; height: 76px; }
  .banner__halal .halal-badge__ar { font-size: 1.35rem; }
  .banner__halal .halal-badge__en { font-size: .6rem; }
  .offers { padding: 70px 0 40px; }
  .offers__grid { grid-template-columns: 1fr; }
  .deal-box { padding: 30px 26px; }
  .posters { padding: 80px 0 60px; }
  .posters__grid { grid-template-columns: 1fr; gap: 18px; }
  .info-box { padding: 60px 26px 34px; }
  .rewards__grid, .visit__grid { grid-template-columns: 1fr; }
  .phone { margin-top: 10px; }
  .site-footer__cols { grid-template-columns: 1fr; gap: 28px; }
  .menu-sec__body { grid-template-columns: 1fr; }
  .menu-sec__img { order: -1; }
  .menu-sec__img img { max-width: 320px; }
  .items { grid-template-columns: 1fr; }
  .pizza-list { grid-template-columns: 1fr; }
  .pizza-side { grid-template-columns: 1fr; }
  .pizza-side .menu-sec__img { display: none; }
  .tag { font-size: clamp(2rem, 9vw, 2.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}