/* ==========================================================================
   Chaos Corner Ranch — main stylesheet
   Aged paper + dark wood + warm photography + vintage ranch signage.

   1. Tokens            6. Values strip        11. Contact page
   2. Base              7. On the Ranch grid   12. Menu drawer
   3. Textures          8. Buttons & links     13. Notices (toast)
   4. Header            9. Footer              14. Responsive
   5. Hero / banners   10. Torn-paper edges
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --ink: #1e1812;
  --dark-brown: #21160f;
  --wood-dark: #2b1b11;
  --wood-medium: #3d291b;
  --parchment: #ead9b7;
  --parchment-light: #f3e8cf;
  --parchment-dark: #d4bd92;
  --warm-gold: #a9783d;
  --cream: #f8f0df;
  --muted-brown: #77624c;
  --white: #fffaf0;

  --ink-soft: #3a2e22;
  --ill-paper: var(--parchment-light); /* fill used inside the line illustrations */

  --font-display: "Zilla Slab", "Rockwell", "Roboto Slab", Georgia, serif;
  --font-poster: "Stint Ultra Condensed", "Rockwell Condensed", "Arial Narrow", "Roboto Condensed", Georgia, serif;
  --font-script: "Crimson Pro", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 76px;
  --header-jag: 10px;
  --torn-h: 34px;

  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .12 .7 0 0 0 -.26'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.009' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .48 0 0 0 0 .32 0 0 0 0 .13 .75 0 0 0 -.27'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --tex-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='360'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0022 .075' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .26 0 0 0 0 .15 1.2 0 0 0 -.5'/%3E%3C/filter%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .16' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .03 0 0 0 0 .02 0 0 0 0 .01 0 1.4 0 0 -.62'/%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.003 .55' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .02 0 0 0 0 .01 0 0 0 0 .005 0 0 1.6 0 -.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --torn-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cpolygon fill='black' points='0.0,18.1 10.2,15.5 18.1,15.7 23.4,25.9 29.2,20.5 35.1,18.2 47.7,22.8 60.5,16.5 67.9,17.6 75.3,25.7 85.0,23.5 94.4,21.8 101.0,23.6 108.5,22.2 115.9,24.5 122.9,21.5 134.9,22.8 147.7,14.7 158.8,14.5 164.1,20.4 173.7,22.3 184.2,18.2 192.9,20.6 201.7,23.4 212.3,17.1 223.9,12.0 234.2,8.3 240.6,14.6 251.7,8.7 259.8,17.4 268.4,13.2 280.0,16.7 288.3,10.5 301.0,7.8 307.8,8.8 317.5,14.7 325.9,10.6 338.5,14.8 348.4,20.5 360.6,16.7 372.0,12.5 377.9,21.2 383.4,10.9 391.1,14.9 397.3,10.4 402.5,20.1 408.7,12.9 416.6,11.9 429.6,16.9 435.3,12.8 442.4,22.1 447.6,23.9 453.7,24.8 463.0,25.1 473.5,17.0 479.9,23.5 491.1,18.7 502.6,27.1 514.0,25.4 520.9,21.9 526.1,16.1 533.2,24.2 541.7,27.2 554.4,20.3 561.2,18.2 571.2,26.5 580.0,23.3 585.7,23.2 597.0,23.9 603.4,24.1 614.8,25.7 623.0,25.0 629.4,14.7 641.6,22.2 653.2,23.6 661.0,17.9 666.1,22.6 675.3,21.6 687.3,19.5 694.3,12.7 704.0,11.7 710.1,19.2 718.7,14.8 727.1,18.5 736.4,18.8 744.9,14.4 756.3,8.4 767.1,12.9 776.2,12.8 782.1,12.8 789.3,15.4 798.8,15.3 807.3,13.6 816.4,14.8 825.7,12.5 836.3,17.7 843.4,14.1 855.1,9.6 863.6,9.3 869.2,16.8 881.4,11.3 891.7,11.8 904.4,13.6 912.6,17.3 924.2,14.1 933.4,16.8 940.9,27.4 950.3,24.5 958.0,21.7 963.5,26.3 976.3,16.2 981.6,24.5 987.6,20.4 999.2,18.7 1011.5,22.7 1017.3,16.6 1025.7,16.8 1035.7,25.6 1047.6,16.5 1056.2,19.6 1068.6,18.4 1077.9,17.7 1084.1,15.1 1091.6,17.8 1099.0,19.8 1106.7,13.6 1111.9,21.9 1118.4,18.4 1124.2,22.2 1133.2,21.8 1142.2,19.5 1150.0,20.7 1160.1,14.9 1165.5,16.7 1176.4,12.1 1182.1,18.8 1192.5,11.5 1199.8,13.3 1208.4,10.5 1221.2,13.4 1233.9,10.2 1238.9,10.9 1247.9,8.6 1253.0,9.3 1261.2,12.0 1268.6,8.8 1277.8,15.1 1288.5,16.9 1296.2,18.3 1306.9,20.0 1318.6,18.0 1329.5,17.5 1338.7,14.2 1350.1,18.8 1362.3,17.7 1369.1,10.3 1377.0,11.7 1386.5,18.6 1396.9,23.1 1408.3,21.5 1417.6,26.5 1428.5,22.2 1435.6,22.8 1440.0,18.1 1440,34 0,34'/%3E%3C/svg%3E");
  --torn-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cpolyline fill='none' stroke='rgba(110,78,40,0.35)' stroke-width='1.2' points='0.0,21.9 10.2,19.3 18.1,19.5 23.4,29.7 29.2,24.3 35.1,22.0 47.7,26.6 60.5,20.3 67.9,21.4 75.3,29.5 85.0,27.3 94.4,25.6 101.0,27.4 108.5,26.0 115.9,28.3 122.9,25.3 134.9,26.6 147.7,18.5 158.8,18.3 164.1,24.2 173.7,26.1 184.2,22.0 192.9,24.4 201.7,27.2 212.3,20.9 223.9,15.8 234.2,12.1 240.6,18.4 251.7,12.5 259.8,21.2 268.4,17.0 280.0,20.5 288.3,14.3 301.0,11.6 307.8,12.6 317.5,18.5 325.9,14.4 338.5,18.6 348.4,24.3 360.6,20.5 372.0,16.3 377.9,25.0 383.4,14.7 391.1,18.7 397.3,14.2 402.5,23.9 408.7,16.7 416.6,15.7 429.6,20.7 435.3,16.6 442.4,25.9 447.6,27.7 453.7,28.6 463.0,28.9 473.5,20.8 479.9,27.3 491.1,22.5 502.6,30.9 514.0,29.2 520.9,25.7 526.1,19.9 533.2,28.0 541.7,31.0 554.4,24.1 561.2,22.0 571.2,30.3 580.0,27.1 585.7,27.0 597.0,27.7 603.4,27.9 614.8,29.5 623.0,28.8 629.4,18.5 641.6,26.0 653.2,27.4 661.0,21.7 666.1,26.4 675.3,25.4 687.3,23.3 694.3,16.5 704.0,15.5 710.1,23.0 718.7,18.6 727.1,22.3 736.4,22.6 744.9,18.2 756.3,12.2 767.1,16.7 776.2,16.6 782.1,16.6 789.3,19.2 798.8,19.1 807.3,17.4 816.4,18.6 825.7,16.3 836.3,21.5 843.4,17.9 855.1,13.4 863.6,13.1 869.2,20.6 881.4,15.1 891.7,15.6 904.4,17.4 912.6,21.1 924.2,17.9 933.4,20.6 940.9,31.2 950.3,28.3 958.0,25.5 963.5,30.1 976.3,20.0 981.6,28.3 987.6,24.2 999.2,22.5 1011.5,26.5 1017.3,20.4 1025.7,20.6 1035.7,29.4 1047.6,20.3 1056.2,23.4 1068.6,22.2 1077.9,21.5 1084.1,18.9 1091.6,21.6 1099.0,23.6 1106.7,17.4 1111.9,25.7 1118.4,22.2 1124.2,26.0 1133.2,25.6 1142.2,23.3 1150.0,24.5 1160.1,18.7 1165.5,20.5 1176.4,15.9 1182.1,22.6 1192.5,15.3 1199.8,17.1 1208.4,14.3 1221.2,17.2 1233.9,14.0 1238.9,14.7 1247.9,12.4 1253.0,13.1 1261.2,15.8 1268.6,12.6 1277.8,18.9 1288.5,20.7 1296.2,22.1 1306.9,23.8 1318.6,21.8 1329.5,21.3 1338.7,18.0 1350.1,22.6 1362.3,21.5 1369.1,14.1 1377.0,15.5 1386.5,22.4 1396.9,26.9 1408.3,25.3 1417.6,30.3 1428.5,26.0 1435.6,26.6 1440.0,21.9'/%3E%3Cpolyline fill='none' stroke='%23fbf5e6' stroke-width='3' stroke-linejoin='round' points='0.0,19.7 10.2,17.1 18.1,17.3 23.4,27.5 29.2,22.1 35.1,19.8 47.7,24.4 60.5,18.1 67.9,19.2 75.3,27.3 85.0,25.1 94.4,23.4 101.0,25.2 108.5,23.8 115.9,26.1 122.9,23.1 134.9,24.4 147.7,16.3 158.8,16.1 164.1,22.0 173.7,23.9 184.2,19.8 192.9,22.2 201.7,25.0 212.3,18.7 223.9,13.6 234.2,9.9 240.6,16.2 251.7,10.3 259.8,19.0 268.4,14.8 280.0,18.3 288.3,12.1 301.0,9.4 307.8,10.4 317.5,16.3 325.9,12.2 338.5,16.4 348.4,22.1 360.6,18.3 372.0,14.1 377.9,22.8 383.4,12.5 391.1,16.5 397.3,12.0 402.5,21.7 408.7,14.5 416.6,13.5 429.6,18.5 435.3,14.4 442.4,23.7 447.6,25.5 453.7,26.4 463.0,26.7 473.5,18.6 479.9,25.1 491.1,20.3 502.6,28.7 514.0,27.0 520.9,23.5 526.1,17.7 533.2,25.8 541.7,28.8 554.4,21.9 561.2,19.8 571.2,28.1 580.0,24.9 585.7,24.8 597.0,25.5 603.4,25.7 614.8,27.3 623.0,26.6 629.4,16.3 641.6,23.8 653.2,25.2 661.0,19.5 666.1,24.2 675.3,23.2 687.3,21.1 694.3,14.3 704.0,13.3 710.1,20.8 718.7,16.4 727.1,20.1 736.4,20.4 744.9,16.0 756.3,10.0 767.1,14.5 776.2,14.4 782.1,14.4 789.3,17.0 798.8,16.9 807.3,15.2 816.4,16.4 825.7,14.1 836.3,19.3 843.4,15.7 855.1,11.2 863.6,10.9 869.2,18.4 881.4,12.9 891.7,13.4 904.4,15.2 912.6,18.9 924.2,15.7 933.4,18.4 940.9,29.0 950.3,26.1 958.0,23.3 963.5,27.9 976.3,17.8 981.6,26.1 987.6,22.0 999.2,20.3 1011.5,24.3 1017.3,18.2 1025.7,18.4 1035.7,27.2 1047.6,18.1 1056.2,21.2 1068.6,20.0 1077.9,19.3 1084.1,16.7 1091.6,19.4 1099.0,21.4 1106.7,15.2 1111.9,23.5 1118.4,20.0 1124.2,23.8 1133.2,23.4 1142.2,21.1 1150.0,22.3 1160.1,16.5 1165.5,18.3 1176.4,13.7 1182.1,20.4 1192.5,13.1 1199.8,14.9 1208.4,12.1 1221.2,15.0 1233.9,11.8 1238.9,12.5 1247.9,10.2 1253.0,10.9 1261.2,13.6 1268.6,10.4 1277.8,16.7 1288.5,18.5 1296.2,19.9 1306.9,21.6 1318.6,19.6 1329.5,19.1 1338.7,15.8 1350.1,20.4 1362.3,19.3 1369.1,11.9 1377.0,13.3 1386.5,20.2 1396.9,24.7 1408.3,23.1 1417.6,28.1 1428.5,23.8 1435.6,24.4 1440.0,19.7'/%3E%3C/svg%3E");
  --torn-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 10' preserveAspectRatio='none'%3E%3Cpolygon fill='black' points='0,0 1440,0 1440,4.4 1440.0,4.4 1437.6,6.5 1433.3,5.0 1425.5,5.7 1421.0,7.8 1416.8,5.6 1412.5,5.7 1405.8,6.2 1398.9,4.7 1394.7,6.0 1389.7,5.2 1382.9,7.7 1377.7,7.4 1370.1,6.2 1363.9,8.4 1358.8,7.9 1352.0,7.5 1345.5,7.7 1338.5,5.7 1334.0,7.2 1327.1,6.7 1318.0,8.2 1311.9,7.8 1302.3,8.3 1297.5,8.3 1291.6,6.9 1287.1,6.1 1282.8,7.8 1278.0,8.4 1270.6,7.0 1263.6,8.3 1258.4,6.3 1251.5,7.2 1247.5,6.4 1240.6,5.1 1232.5,6.3 1225.0,5.1 1215.3,6.6 1211.1,4.2 1205.9,5.3 1200.7,3.6 1193.2,6.2 1184.7,3.4 1179.6,5.7 1174.9,3.5 1170.2,3.8 1161.6,3.8 1155.6,5.2 1150.1,2.2 1140.9,2.9 1134.7,4.0 1126.2,2.0 1121.2,3.5 1113.3,4.0 1104.9,2.1 1095.4,4.2 1086.0,4.1 1078.1,3.9 1070.1,3.0 1063.1,3.8 1055.1,4.8 1049.5,4.4 1041.4,5.0 1032.8,5.8 1028.2,5.7 1023.5,3.2 1018.8,3.8 1009.1,3.2 1002.2,3.9 998.1,5.0 992.0,6.2 987.4,5.8 980.9,6.5 975.4,6.6 967.1,4.3 962.0,6.9 952.2,6.6 946.8,5.6 937.1,5.6 927.9,6.1 920.6,7.7 913.8,6.3 903.8,7.7 897.9,5.3 891.6,4.7 886.3,7.1 877.2,7.7 871.4,7.7 866.0,7.3 860.8,5.6 852.5,7.0 843.0,5.3 838.1,7.5 831.2,7.6 822.7,5.4 814.2,8.7 807.2,6.3 801.1,6.0 794.7,7.0 789.2,5.4 780.2,5.5 775.9,7.2 771.2,6.1 762.6,9.0 755.2,7.2 747.1,4.0 738.1,6.0 728.8,3.5 724.5,3.6 720.5,3.4 713.1,5.6 704.4,5.3 695.5,4.3 689.9,6.0 683.7,5.8 677.1,2.4 668.9,3.0 662.2,3.6 653.9,3.3 647.4,5.0 641.1,4.1 634.8,1.9 628.6,3.8 623.8,2.3 617.6,4.2 611.5,2.8 604.5,5.0 594.7,3.9 589.9,3.4 581.3,3.4 574.1,2.8 569.8,4.3 565.8,5.1 556.2,2.6 547.3,2.9 541.2,4.1 532.0,3.7 524.4,4.2 517.2,3.9 512.2,2.8 504.7,6.6 495.2,6.8 490.9,4.4 483.4,6.2 477.3,5.6 469.4,6.7 464.0,7.7 457.4,7.5 447.8,6.6 438.2,6.0 431.7,5.5 423.0,5.0 416.9,7.2 408.1,5.4 399.0,5.5 391.8,5.7 385.1,7.5 379.1,8.4 372.5,6.3 366.6,7.8 359.9,5.8 351.1,6.1 342.7,4.9 334.1,5.9 326.5,5.9 320.3,7.0 313.6,8.4 305.5,6.3 297.1,5.6 289.0,6.6 284.7,6.5 280.5,5.5 276.5,5.9 266.6,4.5 258.3,5.4 248.6,5.4 241.1,5.1 234.3,6.5 224.6,6.2 220.3,5.0 213.8,2.5 206.2,5.4 196.3,6.1 187.0,4.9 182.7,2.1 173.5,3.0 168.6,5.0 164.0,5.2 159.7,4.0 150.7,4.5 143.2,5.5 134.1,4.3 124.1,5.3 116.0,3.9 108.5,3.2 101.5,4.2 94.9,2.6 90.1,5.4 80.4,5.2 74.1,4.9 64.8,4.0 55.6,5.4 48.1,2.7 40.0,4.7 30.8,3.4 23.0,6.4 16.2,4.0 10.6,3.2 6.2,5.8 0.0,4.4'/%3E%3C/svg%3E");
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath fill='%231e1812' d='M3 4.6C30 2.4 70 3 117 3.4C119.4 4.2 118.6 6.6 116 6.6C84 6 44 6.8 6 8.2C1.6 8.3 .4 5.6 3 4.6Z'/%3E%3C/svg%3E");

  --clip-1: polygon(0.00% 0.07%, 4.09% 0.42%, 6.66% 0.27%, 9.73% 0.36%, 13.67% 0.05%, 15.66% 0.46%, 18.69% 0.42%, 20.62% 0.24%, 24.39% 0.13%, 28.73% 0.50%, 30.72% 0.01%, 34.03% 0.52%, 36.93% 0.12%, 39.93% 0.02%, 42.41% 0.24%, 45.60% 0.13%, 48.11% 0.12%, 51.21% 0.16%, 53.19% 0.46%, 56.53% 0.35%, 58.93% 0.55%, 63.05% 0.07%, 65.82% 0.40%, 69.56% 0.52%, 72.56% 0.46%, 76.20% 0.17%, 79.62% 0.49%, 83.71% 0.28%, 87.13% 0.02%, 89.68% 0.44%, 92.66% 0.10%, 95.98% 0.39%, 99.63% 0.21%, 99.72% 0.00%, 99.71% 3.91%, 99.73% 6.84%, 99.98% 8.84%, 99.46% 12.56%, 99.78% 15.99%, 99.72% 18.35%, 99.58% 22.78%, 99.53% 26.09%, 99.72% 28.60%, 99.68% 32.96%, 99.85% 36.05%, 99.47% 39.38%, 99.57% 41.31%, 99.51% 45.33%, 99.55% 49.15%, 99.69% 52.40%, 99.97% 55.41%, 99.69% 59.55%, 99.72% 61.99%, 99.80% 65.15%, 99.70% 67.95%, 99.66% 71.47%, 99.98% 74.56%, 99.90% 77.07%, 99.53% 80.49%, 99.56% 84.45%, 99.86% 88.46%, 99.63% 92.53%, 99.99% 94.67%, 99.58% 96.62%, 99.94% 99.18%, 100.00% 99.81%, 97.90% 99.91%, 94.63% 99.91%, 92.01% 99.61%, 88.93% 99.82%, 85.80% 99.99%, 82.89% 99.77%, 80.49% 99.94%, 76.26% 99.72%, 73.81% 99.67%, 69.79% 99.99%, 67.83% 99.92%, 64.07% 99.91%, 60.35% 99.63%, 57.03% 99.88%, 52.61% 99.56%, 49.37% 99.88%, 45.79% 99.78%, 42.40% 99.82%, 38.86% 99.97%, 36.18% 99.47%, 32.02% 99.83%, 27.90% 99.83%, 23.57% 99.59%, 20.59% 99.86%, 18.65% 99.52%, 16.63% 99.55%, 12.25% 99.69%, 9.89% 99.52%, 5.47% 99.61%, 2.25% 99.79%, 0.11% 100.00%, 0.24% 96.35%, 0.06% 93.94%, 0.16% 90.31%, 0.18% 87.11%, 0.49% 82.96%, 0.11% 81.00%, 0.54% 78.24%, 0.19% 74.31%, 0.37% 71.85%, 0.51% 67.78%, 0.49% 64.98%, 0.27% 61.30%, 0.13% 56.86%, 0.05% 53.08%, 0.50% 50.73%, 0.42% 48.26%, 0.46% 44.81%, 0.19% 41.94%, 0.48% 39.28%, 0.52% 35.81%, 0.07% 31.62%, 0.06% 28.29%, 0.04% 26.27%, 0.43% 22.13%, 0.19% 18.09%, 0.43% 14.60%, 0.31% 11.71%, 0.04% 9.22%, 0.49% 6.61%, 0.51% 3.25%, 0.15% 0.16%);
  --clip-2: polygon(0.00% 0.53%, 4.35% 0.03%, 6.48% 0.46%, 10.29% 0.37%, 13.00% 0.33%, 16.47% 0.32%, 18.80% 0.24%, 21.72% 0.40%, 26.19% 0.52%, 29.50% 0.24%, 32.11% 0.02%, 34.10% 0.26%, 36.83% 0.21%, 41.04% 0.29%, 44.39% 0.13%, 46.37% 0.18%, 48.64% 0.28%, 53.12% 0.37%, 55.51% 0.49%, 59.47% 0.40%, 63.71% 0.42%, 67.65% 0.19%, 72.08% 0.53%, 74.41% 0.41%, 78.16% 0.25%, 81.44% 0.27%, 85.73% 0.28%, 89.78% 0.19%, 93.96% 0.49%, 97.06% 0.31%, 99.60% 0.00%, 99.88% 3.17%, 99.62% 5.92%, 99.50% 8.26%, 99.50% 10.87%, 99.47% 13.58%, 99.72% 17.31%, 99.64% 20.55%, 99.83% 23.98%, 99.72% 26.43%, 99.66% 30.74%, 99.55% 32.86%, 99.50% 36.63%, 99.59% 39.04%, 99.64% 41.11%, 99.88% 43.73%, 99.94% 47.90%, 99.53% 51.15%, 99.88% 53.70%, 99.77% 57.87%, 99.98% 61.63%, 99.91% 64.48%, 99.95% 68.12%, 99.99% 72.48%, 99.99% 76.27%, 99.55% 78.84%, 99.90% 81.17%, 99.79% 84.86%, 99.46% 86.89%, 99.98% 89.19%, 99.66% 92.00%, 99.94% 95.82%, 99.98% 98.60%, 100.00% 99.58%, 96.19% 99.50%, 92.33% 99.53%, 88.61% 99.74%, 86.11% 99.64%, 83.38% 99.94%, 80.31% 99.52%, 78.07% 99.68%, 75.14% 99.72%, 72.85% 99.47%, 70.27% 99.67%, 67.27% 99.99%, 63.93% 99.92%, 61.86% 99.98%, 59.53% 99.95%, 55.98% 99.72%, 51.54% 99.49%, 47.08% 99.87%, 44.02% 99.86%, 40.59% 99.66%, 36.62% 99.61%, 34.04% 99.77%, 30.77% 100.00%, 28.76% 99.78%, 26.56% 99.60%, 24.02% 99.95%, 21.64% 99.87%, 19.16% 99.71%, 16.05% 99.83%, 12.49% 99.88%, 8.25% 99.47%, 4.46% 99.76%, 1.23% 99.68%, 0.23% 100.00%, 0.10% 96.74%, 0.44% 94.58%, 0.29% 91.72%, 0.34% 87.44%, 0.54% 84.78%, 0.01% 81.91%, 0.06% 78.23%, 0.46% 75.53%, 0.01% 71.89%, 0.23% 68.81%, 0.11% 65.65%, 0.04% 62.22%, 0.21% 59.57%, 0.04% 55.26%, 0.11% 51.40%, 0.22% 48.02%, 0.41% 44.92%, 0.07% 41.98%, 0.04% 39.75%, 0.35% 35.66%, 0.38% 31.28%, 0.36% 29.30%, 0.40% 25.39%, 0.20% 22.19%, 0.44% 19.10%, 0.29% 16.49%, 0.53% 13.35%, 0.51% 9.37%, 0.16% 5.31%, 0.27% 2.80%, 0.24% 0.21%);
  --clip-3: polygon(0.00% 0.13%, 3.31% 0.20%, 6.78% 0.34%, 8.87% 0.01%, 12.93% 0.14%, 15.45% 0.55%, 18.57% 0.46%, 21.71% 0.35%, 24.02% 0.35%, 28.16% 0.29%, 31.98% 0.37%, 34.06% 0.42%, 37.50% 0.17%, 39.50% 0.48%, 42.63% 0.40%, 46.80% 0.39%, 51.07% 0.22%, 55.04% 0.24%, 59.36% 0.48%, 61.53% 0.07%, 64.00% 0.53%, 67.04% 0.34%, 69.73% 0.28%, 72.64% 0.19%, 76.06% 0.32%, 80.29% 0.38%, 84.59% 0.47%, 89.05% 0.37%, 91.38% 0.47%, 95.77% 0.50%, 99.15% 0.39%, 99.54% 0.00%, 99.84% 3.39%, 99.53% 5.47%, 99.95% 9.92%, 99.77% 13.89%, 99.84% 16.20%, 99.52% 20.09%, 99.66% 22.12%, 99.60% 24.16%, 99.52% 26.92%, 99.72% 31.35%, 99.83% 35.83%, 99.67% 37.95%, 99.89% 39.95%, 99.66% 42.91%, 99.98% 45.23%, 99.83% 49.37%, 99.51% 53.75%, 99.75% 56.63%, 99.65% 59.89%, 99.69% 63.33%, 99.48% 66.84%, 99.76% 70.06%, 99.87% 73.82%, 99.46% 76.51%, 99.70% 79.77%, 99.77% 81.71%, 99.99% 85.12%, 99.65% 88.62%, 99.65% 90.69%, 99.63% 93.80%, 99.61% 96.63%, 100.00% 99.99%, 97.92% 99.63%, 93.54% 99.86%, 90.45% 99.67%, 87.71% 99.80%, 84.99% 99.80%, 81.55% 99.83%, 78.66% 99.58%, 76.67% 99.69%, 72.87% 99.83%, 70.38% 99.56%, 67.85% 99.90%, 64.81% 99.62%, 62.63% 99.82%, 59.86% 99.54%, 56.82% 99.53%, 54.46% 99.81%, 50.88% 99.51%, 47.80% 99.88%, 45.57% 99.71%, 43.17% 99.56%, 39.10% 99.90%, 36.47% 99.56%, 32.90% 99.56%, 30.10% 99.93%, 27.43% 99.56%, 24.82% 99.81%, 21.83% 99.77%, 18.86% 99.49%, 16.54% 100.00%, 12.21% 99.52%, 7.76% 99.76%, 3.41% 99.49%, 0.92% 99.59%, 0.36% 100.00%, 0.16% 96.75%, 0.13% 93.96%, 0.32% 91.86%, 0.45% 89.21%, 0.50% 87.17%, 0.51% 83.48%, 0.49% 79.26%, 0.01% 75.87%, 0.09% 72.04%, 0.36% 69.35%, 0.23% 66.09%, 0.34% 61.76%, 0.14% 58.97%, 0.26% 54.84%, 0.19% 50.92%, 0.29% 48.49%, 0.09% 44.48%, 0.51% 40.54%, 0.45% 36.55%, 0.35% 34.61%, 0.03% 30.49%, 0.15% 27.87%, 0.23% 24.60%, 0.43% 21.47%, 0.03% 19.55%, 0.07% 17.30%, 0.54% 15.21%, 0.05% 11.10%, 0.17% 7.89%, 0.19% 5.17%, 0.32% 1.59%);
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--dark-brown);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; margin: 0; }
p { margin: 0; }
.value p, .hero__text, .contact__note, .contact__intro p, .contact-band p { text-wrap: balance; }

/* Tall condensed "ranch signage" lettering; the stroke gives the thin face its weight. */
.poster,
.hero__title-main,
.section-title {
  font-family: var(--font-poster);
  font-weight: 400;
  -webkit-text-stroke: .03em currentColor;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: .6em 1em;
  background: var(--dark-brown); color: var(--cream);
  font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px dashed var(--warm-gold); outline-offset: 3px; }

/* 3. Textures -------------------------------------------------------------- */
.paper {
  background-color: var(--parchment-light);
  background-image:
    var(--tex-grain),
    var(--tex-mottle),
    radial-gradient(ellipse 80% 90% at 50% 45%, rgba(255, 250, 236, .45), transparent 70%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120, 80, 32, .16) 100%);
  background-size: 240px 240px, 700px 700px, 100% 100%, 100% 100%;
}
.paper--aged { background-color: var(--parchment); --ill-paper: var(--parchment); }

.wood {
  background-color: var(--wood-dark);
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0 118px,
      rgba(0, 0, 0, .55) 118px 120px,
      rgba(255, 220, 170, .05) 120px 121px),
    var(--tex-wood),
    linear-gradient(180deg, #2e1d12, #22160e 60%, #1c120b);
  background-size: 100% 121px, 900px 360px, 100% 100%;
}

/* 4. Header ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  filter: drop-shadow(0 3px 4px rgba(20, 12, 6, .38));
}

.site-header__paper {
  padding-bottom: var(--header-jag);
  -webkit-mask-image: linear-gradient(#000, #000), var(--torn-bottom);
          mask-image: linear-gradient(#000, #000), var(--torn-bottom);
  -webkit-mask-size: 100% calc(100% - var(--header-jag) + 1px), 1440px var(--header-jag);
          mask-size: 100% calc(100% - var(--header-jag) + 1px), 1440px var(--header-jag);
  -webkit-mask-position: top left, bottom left;
          mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat, repeat-x;
          mask-repeat: no-repeat, repeat-x;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-mark {
  width: auto;
  height: 64px;
}

.brand__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.36rem;
  line-height: .95;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.brand__name span:last-child { font-size: .9em; letter-spacing: .08em; }

.site-nav { margin-left: auto; }
.site-nav ul {
  display: flex;
  gap: clamp(22px, 4.2vw, 64px);
  margin: 0; padding: 0;
  list-style: none;
}
.site-nav a {
  position: relative;
  display: block;
  padding: 6px 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: -5px; right: -5px; bottom: -3px;
  height: 7px;
  background: var(--brush) center / 100% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a:hover { color: var(--wood-medium); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: clamp(12px, 3.5vw, 52px);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s ease;
}
.icon-btn svg { width: 25px; height: 25px; }
.icon-btn:hover { background: rgba(30, 24, 18, .08); }

/* 5. Hero / banners -------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(560px, 88vh, 840px);
  margin-top: calc(-1 * var(--header-jag));
  color: var(--cream);
  background:
    radial-gradient(ellipse at 50% 30%, #6b4a2b, transparent 70%),
    linear-gradient(180deg, #3d291b, #1c120b);
}

.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.hero.is-missing .hero__media img { display: none; }

.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20, 12, 6, .38) 0%, rgba(20, 12, 6, 0) 20%),
    radial-gradient(ellipse 58% 42% at 50% 70%, rgba(20, 12, 6, .58), rgba(20, 12, 6, 0) 72%),
    linear-gradient(0deg, rgba(20, 12, 6, .62) 0%, rgba(20, 12, 6, 0) 46%);
}

.hero__content {
  width: min(100% - 2 * var(--gutter), 860px);
  margin: 0 auto;
  padding-bottom: calc(var(--torn-h) + clamp(44px, 7vh, 76px));
  padding-top: calc(var(--header-h) + 40px);
  text-align: center;
}

.hero__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.5vw, 2.05rem);
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.hero__title {
  font-size: clamp(3.1rem, 10.5vw, 6.7rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 3px 16px rgba(0, 0, 0, .5);
}
.hero__title-main {
  display: block;
  margin: .1em 0 .16em;
}

.hero__tagline {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  line-height: 1.18;
  margin-bottom: .85em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}
.hero__tagline span { display: block; }

.hero__text {
  max-width: 38ch;
  margin: 0 auto 1.7em;
  font-size: clamp(1rem, 1.35vw, 1.13rem);
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .75);
}

/* Shorter banner used on inner pages */
.hero--page { min-height: clamp(400px, 56vh, 560px); }
.hero--page .hero__media img { object-position: 50% 26%; }
.hero--page::before {
  background:
    linear-gradient(180deg, rgba(20, 12, 6, .45) 0%, rgba(20, 12, 6, .1) 30%),
    radial-gradient(ellipse 60% 50% at 50% 66%, rgba(20, 12, 6, .62), rgba(20, 12, 6, 0) 74%),
    linear-gradient(0deg, rgba(20, 12, 6, .7) 0%, rgba(20, 12, 6, 0) 55%);
}
.hero--page .hero__title { font-size: clamp(2.8rem, 8.6vw, 5.4rem); }

/* 6. Values strip ---------------------------------------------------------- */
.values { padding: calc(var(--torn-h) + 6px) 0 clamp(36px, 5vw, 50px); }

.values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0; padding: 0;
  list-style: none;
}

.value {
  position: relative;
  padding: 4px clamp(10px, 2vw, 28px) 6px;
  text-align: center;
}
.value + .value::before {
  content: "";
  position: absolute;
  left: 0; top: 22%; bottom: 4%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(30, 24, 18, .5) 14%, rgba(30, 24, 18, .5) 86%, transparent);
}

.ill { color: var(--ink); height: auto; overflow: visible; }
.value .ill {
  width: auto;
  height: clamp(84px, 9.4vw, 112px);
  margin: 0 auto 10px;
}

.value h3 {
  margin-bottom: .28em;
  font-size: clamp(1.15rem, 1.75vw, 1.5rem);
  letter-spacing: .045em;
  text-transform: uppercase;
}
.value p {
  max-width: 24ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.38;
}

/* 7. On the Ranch grid ----------------------------------------------------- */
.ranch {
  padding: clamp(28px, 4vw, 40px) 0 clamp(48px, 7vw, 72px);
  box-shadow: inset 0 12px 14px -12px rgba(40, 24, 10, .55);
}

.section-title {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  margin-bottom: clamp(16px, 2.4vw, 24px);
  font-size: clamp(2.5rem, 4.8vw, 3.7rem);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.section-title::after {
  content: "";
  flex: 1;
  max-width: 440px;
  height: 2px;
  margin-top: .08em;
  background: linear-gradient(90deg, var(--ink) 0 75%, rgba(30, 24, 18, 0));
}

.family {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 22px);
  margin: 0; padding: 0;
  list-style: none;
}

.member {
  filter: drop-shadow(0 2px 2px rgba(40, 24, 10, .28)) drop-shadow(0 7px 10px rgba(40, 24, 10, .2));
  transition: transform .25s ease;
}

.member__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: clamp(8px, 1vw, 11px) clamp(8px, 1vw, 11px) clamp(10px, 1.3vw, 14px);
  clip-path: var(--clip-1);
}
.member:nth-child(3n+2) .member__card { clip-path: var(--clip-2); }
.member:nth-child(3n+3) .member__card { clip-path: var(--clip-3); }

.member__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: linear-gradient(160deg, #7a5c3c, #4a3322);
}
.member__photo::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(30, 20, 10, .35), inset 0 0 18px rgba(40, 24, 10, .25);
  pointer-events: none;
}
.member__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Friendly stand-in until a photo is dropped into assets/images/ */
.member__photo.is-missing img { display: none; }
.member__photo.is-missing::before {
  content: "Photo coming soon";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(248, 240, 223, .8);
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.05rem;
}

.member__name {
  margin-top: .42em;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  letter-spacing: .045em;
  text-transform: uppercase;
  text-align: center;
}

/* Links under a name: a text button (View, LinkedIn, Website) and/or round social icons.
   All of them open in a new tab. */
.member__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin: .5em 0 0;
  padding: 0;
  list-style: none;
}

.member__btn {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 30px;
  padding: .3em 1.3em .28em;
  background: var(--wood-dark);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .12em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background-color .2s ease, transform .2s ease;
}
.member__btn svg { width: .95em; height: .95em; }

.member__icon {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--wood-dark);
  color: var(--cream);
  transition: background-color .2s ease, transform .2s ease;
}
.member__icon svg { width: 16px; height: 16px; }

.member__btn:hover,
.member__icon:hover { background: var(--wood-medium); transform: translateY(-2px); }
.member__btn:focus-visible,
.member__icon:focus-visible { outline-offset: 2px; }

/* 8. Buttons & links ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .6em 2.3em .56em;
  border: 2px solid currentColor;
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  letter-spacing: .09em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--ghost {
  color: var(--cream);
  background: rgba(20, 12, 6, .58);
  border-color: rgba(248, 240, 223, .85);
}
.btn--ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.btn--dark { color: var(--cream); background: var(--wood-dark); border-color: var(--wood-dark); }
.btn--dark:hover { background: var(--wood-medium); border-color: var(--wood-medium); }

.text-link {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: underline;
  text-decoration-color: var(--warm-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.text-link:hover { color: var(--wood-medium); text-decoration-color: var(--ink); }

/* 9. Footer ---------------------------------------------------------------- */
.site-footer {
  color: var(--parchment);
  padding: clamp(36px, 5vw, 48px) 0 20px;
  border-top: 3px solid #140d08;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.35fr .8fr .7fr .95fr 1.55fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.footer__brand { text-align: center; }
.footer__brand .brand-link { color: var(--cream); text-decoration: none; display: inline-block; }
.footer__brand .logo-mark { width: 150px; height: auto; margin: 0 auto 10px; }
.footer__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.footer__tag { margin: .55em 0 1em; font-size: .98rem; line-height: 1.4; opacity: .88; }

.socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0; padding: 0;
  list-style: none;
}
.socials a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--parchment-light);
  color: var(--dark-brown);
  transition: background-color .2s ease, transform .2s ease;
}
.socials a:hover { background: var(--white); transform: translateY(-2px); }
.socials svg { width: 19px; height: 19px; }
.socials--dark a { background: var(--wood-dark); color: var(--cream); }
.socials--dark a:hover { background: var(--wood-medium); }

.footer__col h2 {
  margin-bottom: .75em;
  color: var(--parchment-light);
  font-size: 1.12rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.footer__col ul { display: grid; gap: .32em; margin: 0; padding: 0; list-style: none; }
.footer__col a {
  color: var(--parchment);
  font-size: 1rem;
  text-decoration: none;
  opacity: .92;
}
.footer__col a:hover { color: var(--white); opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.footer__signup {
  padding-left: clamp(20px, 3vw, 36px);
  border-left: 1px solid rgba(234, 217, 183, .22);
}
.footer__signup h2 {
  margin-bottom: .45em;
  color: var(--parchment-light);
  font-size: 1.12rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.footer__signup p { margin-bottom: 1em; font-size: .98rem; line-height: 1.4; opacity: .9; }

.signup { display: grid; gap: 10px; }
.signup input {
  width: 100%;
  padding: .72em .95em;
  border: 1px solid transparent;
  border-radius: 2px;
  background: var(--parchment-light);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.signup input::placeholder { color: var(--muted-brown); }
.signup button {
  padding: .62em 1em .58em;
  border: 1.5px solid rgba(234, 217, 183, .85);
  border-radius: 2px;
  background: transparent;
  color: var(--parchment-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.signup button:hover { background: var(--parchment-light); color: var(--ink); }

.footer__bottom {
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: 16px;
  border-top: 1px solid rgba(234, 217, 183, .14);
  font-size: .88rem;
  text-align: center;
  opacity: .7;
}

/* 10. Torn-paper edges ----------------------------------------------------- */
/* A section with .torn-top tucks up over the section above it and shows a
   ripped paper edge (with a pale fibre line) along its top. */
.torn-top {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--torn-h));
  -webkit-mask-image: var(--torn-top), linear-gradient(#000, #000);
          mask-image: var(--torn-top), linear-gradient(#000, #000);
  -webkit-mask-size: 1440px var(--torn-h), 100% calc(100% - var(--torn-h) + 1px);
          mask-size: 1440px var(--torn-h), 100% calc(100% - var(--torn-h) + 1px);
  -webkit-mask-position: top left, bottom left;
          mask-position: top left, bottom left;
  -webkit-mask-repeat: repeat-x, no-repeat;
          mask-repeat: repeat-x, no-repeat;
}
.torn-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--torn-h);
  background: var(--torn-fiber) top left / 1440px var(--torn-h) repeat-x;
  pointer-events: none;
}

/* 11. Contact page --------------------------------------------------------- */
.contact { padding: calc(var(--torn-h) + 18px) 0 clamp(44px, 6vw, 64px); }

.contact__intro {
  margin: 0 auto clamp(26px, 4vw, 40px);
  text-align: center;
}
.contact__intro .section-title { justify-content: center; }
.contact__intro .section-title::before,
.contact__intro .section-title::after {
  content: "";
  flex: 1 1 0;
  min-width: 20px;
  max-width: 90px;
  height: 2px;
  margin-top: .08em;
  background: var(--ink);
}
.contact__intro .section-title::before { background: linear-gradient(270deg, var(--ink) 0 60%, rgba(30, 24, 18, 0)); }
.contact__intro .section-title::after { background: linear-gradient(90deg, var(--ink) 0 60%, rgba(30, 24, 18, 0)); }
.contact__intro p { max-width: 56ch; margin-inline: auto; color: var(--ink-soft); font-size: 1.1rem; }

.contact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0; padding: 0;
  list-style: none;
}
.contact__grid .value p { max-width: 28ch; margin-bottom: .8em; }
.contact__grid .value .socials { margin-top: .2em; }

.contact__note {
  max-width: 44ch;
  margin: clamp(28px, 4vw, 40px) auto 0;
  font-family: var(--font-script);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.3;
  text-align: center;
  color: var(--ink-soft);
}

.contact-band { padding: clamp(40px, 6vw, 60px) 0; box-shadow: inset 0 12px 14px -12px rgba(40, 24, 10, .55); }
.contact-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
}
.contact-band h2 {
  font-size: clamp(2.1rem, 4vw, 3rem);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.contact-band p { margin-top: .35em; color: var(--ink-soft); max-width: 52ch; }

/* 12. Menu drawer ---------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  transition: visibility 0s linear .3s;
}
.drawer.is-open { visibility: visible; transition-delay: 0s; }

.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(15, 9, 5, .6);
  opacity: 0;
  transition: opacity .3s ease;
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute;
  top: 0; right: 0;
  display: flex;
  flex-direction: column;
  width: min(380px, 88vw);
  height: 100%;
  padding: 18px 28px 28px;
  overflow-y: auto;
  color: var(--parchment);
  transform: translateX(100%);
  transition: transform .3s ease;
  box-shadow: -8px 0 24px rgba(0, 0, 0, .4);
}
.drawer.is-open .drawer__panel { transform: none; }

.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.drawer__top .logo-mark { height: 60px; }
.drawer .icon-btn { color: var(--parchment-light); }
.drawer .icon-btn:hover { background: rgba(255, 240, 210, .08); }

.drawer__label {
  margin: 22px 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--parchment-dark);
  opacity: .8;
}
.drawer__nav ul { margin: 0; padding: 0; list-style: none; }
.drawer__nav li + li { border-top: 1px solid rgba(234, 217, 183, .12); }
.drawer__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5em 0;
  color: var(--parchment-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
}
.drawer__nav a svg { width: 18px; height: 18px; opacity: .55; transition: transform .2s ease, opacity .2s ease; }
.drawer__nav a:hover svg { opacity: 1; transform: translateX(3px); }
.drawer__nav a[aria-current="page"] { color: var(--warm-gold); }
.drawer__nav small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: none;
  opacity: .7;
}
.drawer__soon { font-family: var(--font-script); font-style: italic; font-size: 1.1rem; opacity: .75; margin-top: .4em; }
.drawer__foot { margin-top: auto; padding-top: 28px; }
.drawer__foot .socials { justify-content: flex-start; }

body.menu-open { overflow: hidden; }

/* 13. Notices (toast) ------------------------------------------------------ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 120;
  max-width: calc(100% - 32px);
  padding: .75em 1.25em;
  border: 1px solid rgba(234, 217, 183, .35);
  border-radius: 2px;
  background: var(--dark-brown);
  color: var(--cream);
  font-size: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* 14. Responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__signup {
    grid-column: 1 / -1;
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(234, 217, 183, .18);
  }
  .signup { grid-template-columns: 1fr auto; }
  .signup button { padding-inline: 1.6em; }
}

@media (max-width: 900px) {
  :root { --header-h: 68px; }
  .site-nav { display: none; }
  .header-actions { margin-left: auto; }

  .values__grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .value:nth-child(odd)::before { display: none; }
}

@media (max-width: 760px) {
  .family { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .contact__grid { grid-template-columns: 1fr; row-gap: 34px; }
  .contact__grid .value::before { display: none; }
  .contact-band__inner { flex-direction: column; text-align: center; }
}

@media (max-width: 560px) {
  :root { --header-h: 62px; --torn-h: 26px; }
  .brand .logo-mark { height: 52px; }
  .brand { gap: 9px; }
  .brand__name { font-size: 1.12rem; }
  .icon-btn { width: 40px; height: 40px; }

  .hero { min-height: max(560px, 86svh); }
  .hero--page { min-height: 440px; }
  .hero__content { padding-bottom: calc(var(--torn-h) + 36px); }
  .hero__text { max-width: 34ch; }

  .value { padding-inline: 8px; }
  .value .ill { height: 78px; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--info { grid-column: 1 / -1; }
  .signup { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .brand__name { font-size: 1rem; }
  .family { gap: 10px; }
  .member__name { font-size: 1.05rem; }
}

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

@media print {
  .site-header, .drawer, .toast, .signup { display: none !important; }
  .hero { min-height: 0; color: var(--ink); }
}