:root {
  --paper:      #E5DCC9;
  --paper-sunk: #D8CDB6;
  --card:       #F1EADB;
  --ink:        #14100C;
  --ink-mid:    #574C3E;
  --ink-faint:  #766854;
  --chile:      #8E1409;
  /* --chile is a ground under near-white text; --chile-ink is the same
     red used AS text, which needs more lift on a dark page. */
  --chile-ink:  #8E1409;
  --chile-deep: #5C0B04;
  --flame:      #B4551D;
  --char:       #0B0907;
  --char-soft:  #14100C;
  --bone:       #E5DCC9;
  --rule:       #C9BCA2;
  --rule-firm:  #A8987A;

  /* heat ramp, cool to hot: green (no flame), then real flame colours.
     --heat-off is a pip that is not lit. */
  --heat-off: #B6A88C;
  --heat-1: #6E7A38;
  --heat-2: #8E1409;
  --heat-3: #A82F0F;
  --heat-4: #BF5A16;
  --heat-5: #CE8A22;
  --heat-6: #E4CE8E;
  --heat-6-edge: #9C7A22;

  --display: "Special Elite", "Courier New", monospace;
  --name: "Comic Neue", "Comic Sans MS", cursive;
  --name-style: italic;
  --name-weight: 700;
  --name-size: 23px;
  --name-color: #8E1409;
  --cond:    "Barlow Condensed", "Arial Narrow", Helvetica, sans-serif;
  --body:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: clamp(20px, 5vw, 64px);
}


:root[data-theme="dark"] {
  --paper:      #0C0A08;
  --paper-sunk: #120E0B;
  --card:       #17120E;
  --ink:        #E2D7C3;
  --ink-mid:    #9A8C77;
  --ink-faint:  #887B6A;
  --chile:      #C62A18;
  --chile-ink:  #E24634;
  --chile-deep: #E0503A;
  --flame:      #D2822F;
  --char:       #060504;
  --char-soft:  #100D0A;
  --bone:       #E2D7C3;
  --rule:       #2A211A;
  --rule-firm:  #3E3226;

  --heat-off: #362B21;
  --heat-1: #8A9A48;
  --heat-2: #C62A18;
  --heat-3: #D8451C;
  --heat-4: #E4721F;
  --heat-5: #EFA033;
  --heat-6: #F2E0A8;
  --heat-6-edge: #A8862E;
  --name-color: #E0503A;
}

/* >>> generated by tools/make-assets.py, do not edit by hand <<< */
:root {
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27260%27%20height%3D%27260%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.82%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
  --wire: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2772%27%20height%3D%2714%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M0%206.6%20Q9%202.6%2018%206.6%20Q27%202.6%2036%206.6%20Q45%202.6%2054%206.6%20Q63%202.6%2072%206.6%20L72%207.4%20Q63%2011.4%2054%207.4%20Q45%2011.4%2036%207.4%20Q27%2011.4%2018%207.4%20Q9%2011.4%200%207.4%20Z%27%2F%3E%3Cg%20fill%3D%27%23000%27%3E%3Cellipse%20cx%3D%2736%27%20cy%3D%277%27%20rx%3D%273.4%27%20ry%3D%274%27%2F%3E%3Ccircle%20cx%3D%2734.5%27%20cy%3D%273.5%27%20r%3D%272.1%27%2F%3E%3Ccircle%20cx%3D%2737.7%27%20cy%3D%275.3%27%20r%3D%272.3%27%2F%3E%3Ccircle%20cx%3D%2734.3%27%20cy%3D%278.8%27%20r%3D%272.3%27%2F%3E%3Ccircle%20cx%3D%2737.5%27%20cy%3D%2710.7%27%20r%3D%272%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M34.4%205.4%20L32.2%200.6%27%2F%3E%3Cpath%20d%3D%27M37.6%205.4%20L39.8%200.6%27%2F%3E%3Cpath%20d%3D%27M34.4%208.6%20L32.2%2013.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --tear-band: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27400%27%20height%3D%2720%27%20viewBox%3D%270%200%20400%2020%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M0%200%20H400%20L400.0%2012.3%20L398.6%2012.3%20L394.0%2012.4%20L391.8%2013.8%20L389.3%2011.2%20L386.9%209.6%20L381.8%2010.3%20L377.4%2013.8%20L374.0%2012.3%20L369.0%2010.4%20L366.1%2013.4%20L362.7%2012.3%20L358.7%2012.5%20L356.3%2011.3%20L353.4%2011.4%20L350.3%2012.0%20L345.7%2012.2%20L343.4%2012.1%20L340.3%2012.1%20L336.9%2012.5%20L333.2%2013.6%20L328.3%2012.6%20L324.3%2010.0%20L319.2%2013.3%20L316.8%2010.1%20L313.4%2012.1%20L309.3%2011.0%20L306.8%2011.7%20L301.8%2011.5%20L298.3%2010.8%20L292.8%2012.9%20L288.7%2013.1%20L286.5%2010.5%20L282.7%209.3%20L280.4%2012.1%20L276.2%209.3%20L272.1%2012.5%20L270.0%2013.1%20L267.7%209.4%20L262.3%2012.1%20L257.9%209.3%20L254.1%2010.8%20L248.7%209.3%20L246.2%2010.2%20L243.1%2012.6%20L238.4%209.4%20L234.6%2010.5%20L230.9%2013.1%20L226.9%2012.1%20L223.7%209.9%20L219.2%209.1%20L216.4%2010.3%20L211.0%2011.6%20L207.3%209.1%20L202.2%2010.8%20L198.1%2010.8%20L193.1%209.7%20L189.7%209.6%20L185.2%2012.6%20L179.8%209.6%20L175.3%208.7%20L171.5%2011.9%20L168.4%2012.2%20L165.7%2013.1%20L162.9%2012.5%20L160.8%209.1%20L158.2%2011.5%20L153.3%2011.1%20L149.8%209.1%20L147.2%209.7%20L142.8%2012.7%20L137.6%209.7%20L133.8%2010.3%20L129.0%209.1%20L126.7%2010.4%20L124.5%2010.6%20L119.2%209.9%20L115.4%209.7%20L111.2%2012.5%20L107.8%2011.1%20L102.6%209.3%20L100.5%208.7%20L97.2%2012.1%20L92.2%209.0%20L89.8%2010.5%20L86.0%2011.5%20L83.3%209.6%20L78.2%208.5%20L72.8%2011.1%20L68.9%2011.2%20L64.9%2010.0%20L59.9%2010.7%20L56.1%2010.4%20L52.0%209.2%20L47.0%2012.6%20L42.6%2012.0%20L39.4%2010.0%20L36.8%2010.1%20L31.8%2011.8%20L27.9%2012.5%20L24.7%2012.0%20L21.8%209.6%20L16.7%2011.4%20L13.4%208.6%20L10.5%209.8%20L8.0%2010.5%20L3.7%2011.9%20L0.0%208.9%20H0%20Z%27%2F%3E%3C%2Fsvg%3E");
  --tear-booth: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27400%27%20height%3D%27300%27%20viewBox%3D%270%200%20400%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M0.0%200.0%20L400%200.0%20L399.4%200.0%20L395.2%202.1%20L398.9%207.4%20L399.3%2010.5%20L399.8%2013.3%20L399.9%2017.8%20L399.9%2020.0%20L395.1%2024.9%20L398.9%2030.0%20L396.3%2035.5%20L400.0%2038.6%20L399.3%2043.5%20L399.0%2047.0%20L399.4%2051.4%20L399.8%2055.9%20L399.6%2058.0%20L399.0%2062.8%20L399.0%2066.3%20L395.7%2069.5%20L400.0%2073.7%20L399.9%2076.9%20L399.7%2079.3%20L398.4%2083.5%20L399.2%2088.8%20L398.5%2092.5%20L399.0%2095.9%20L399.4%20100.5%20L399.1%20103.2%20L399.0%20106.9%20L395.4%20111.2%20L398.5%20115.9%20L398.2%20120.8%20L398.5%20123.6%20L398.1%20127.6%20L398.8%20130.1%20L398.2%20132.7%20L398.7%20137.5%20L397.8%20141.2%20L398.6%20144.0%20L397.8%20146.9%20L398.7%20149.4%20L398.4%20154.1%20L398.6%20157.8%20L398.0%20162.7%20L397.7%20164.7%20L398.6%20166.8%20L398.5%20169.0%20L398.5%20172.7%20L398.1%20176.6%20L398.3%20179.3%20L397.7%20184.3%20L397.8%20186.8%20L398.4%20189.2%20L398.7%20192.0%20L398.2%20196.6%20L397.6%20198.7%20L394.3%20202.8%20L398.4%20205.0%20L398.2%20208.9%20L398.7%20213.5%20L398.4%20216.6%20L398.3%20220.5%20L398.3%20225.6%20L398.2%20229.2%20L398.5%20233.2%20L399.2%20238.7%20L398.4%20243.1%20L398.5%20245.4%20L396.5%20248.0%20L398.6%20252.0%20L398.8%20255.2%20L398.8%20258.9%20L399.0%20263.7%20L398.6%20265.7%20L398.6%20268.5%20L398.1%20271.5%20L398.6%20275.9%20L399.0%20280.5%20L399.4%20283.2%20L398.6%20287.5%20L399.1%20291.0%20L398.4%20295.0%20L398.5%20299.0%20L398.5%20300.0%20L400.0%20291.6%20L394.6%20292.5%20L390.7%20291.4%20L386.5%20290.3%20L383.0%20289.4%20L379.3%20291.0%20L376.8%20292.5%20L374.3%20287.2%20L370.0%20288.0%20L364.6%20290.6%20L360.7%20289.2%20L356.7%20290.6%20L351.3%20289.6%20L348.8%20291.7%20L346.3%20289.7%20L342.9%20290.5%20L337.9%20290.6%20L334.2%20292.5%20L329.6%20289.1%20L327.0%20290.7%20L321.7%20290.6%20L319.3%20290.3%20L315.9%20292.3%20L311.9%20289.2%20L307.7%20291.9%20L303.3%20292.0%20L300.4%20289.6%20L295.0%20290.8%20L290.6%20290.2%20L287.1%20290.1%20L283.4%20289.1%20L280.3%20291.6%20L276.6%20289.8%20L274.3%20288.9%20L271.8%20288.4%20L266.3%20292.4%20L263.3%20289.1%20L258.5%20289.1%20L255.9%20291.8%20L253.9%20290.0%20L251.2%20291.8%20L246.0%20288.7%20L242.0%20289.9%20L238.4%20290.1%20L234.6%20290.5%20L231.5%20290.3%20L226.4%20289.3%20L223.1%20288.3%20L218.5%20290.6%20L213.4%20291.6%20L210.0%20292.2%20L207.2%20289.8%20L204.4%20291.1%20L201.2%20290.5%20L198.1%20290.3%20L193.1%20289.8%20L189.1%20290.8%20L184.1%20291.9%20L179.0%20288.8%20L175.0%20290.8%20L172.1%20291.9%20L168.1%20289.2%20L163.0%20291.1%20L160.6%20288.4%20L156.3%20290.2%20L153.2%20288.2%20L150.8%20291.2%20L148.6%20290.6%20L143.4%20289.0%20L141.4%20289.5%20L139.2%20289.4%20L136.1%20288.6%20L131.8%20288.0%20L128.1%20288.7%20L124.0%20291.6%20L120.4%20288.4%20L115.3%20289.7%20L111.0%20292.4%20L106.4%20285.6%20L101.0%20290.4%20L96.4%20288.3%20L93.9%20291.4%20L89.7%20289.5%20L84.9%20289.3%20L82.1%20288.5%20L78.2%20291.2%20L75.4%20289.5%20L70.2%20288.2%20L67.3%20289.2%20L62.8%20289.8%20L58.2%20292.0%20L54.6%20292.0%20L52.0%20292.2%20L52.6%20291.1%20L50.3%20292.1%20L47.9%20291.4%20L44.7%20291.1%20L42.8%20291.3%20L39.4%20290.7%20L37.1%20289.8%20L34.3%20289.6%20L31.1%20288.1%20L28.0%20287.1%20L25.5%20286.7%20L23.3%20285.5%20L21.5%20284.2%20L19.9%20283.0%20L17.1%20281.1%20L15.1%20279.7%20L13.5%20279.2%20L11.2%20277.0%20L8.8%20274.7%20L6.8%20271.4%20L5.2%20269.9%20L4.4%20265.1%20L0.8%20264.6%20L0.0%20264.0%20L0.0%200%20Z%27%2F%3E%3C%2Fsvg%3E");
  --tear-jars: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27400%27%20height%3D%27300%27%20viewBox%3D%270%200%20400%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M0.0%200.9%20L4.7%200.4%20L7.7%201.2%20L10.4%200.5%20L15.6%204.4%20L20.3%201.4%20L23.5%201.3%20L27.0%200.8%20L31.9%200.5%20L34.4%200.8%20L38.8%200.8%20L44.2%201.0%20L49.5%200.8%20L51.9%201.8%20L57.1%201.0%20L61.5%200.9%20L66.6%201.1%20L71.8%201.2%20L74.7%200.6%20L78.5%201.1%20L81.7%200.4%20L84.1%201.0%20L86.8%200.4%20L88.9%200.6%20L91.3%200.8%20L96.0%200.2%20L98.5%200.6%20L103.9%201.2%20L107.6%200.1%20L110.9%200.3%20L114.9%200.7%20L118.4%200.2%20L121.6%204.3%20L125.2%201.3%20L127.6%200.9%20L132.7%200.1%20L138.0%200.5%20L141.6%200.4%20L145.3%200.4%20L150.2%200.8%20L152.2%200.6%20L156.1%200.0%20L160.1%201.1%20L164.3%200.2%20L169.6%202.9%20L172.5%200.1%20L175.5%200.5%20L177.9%200.1%20L182.3%200.1%20L186.4%204.2%20L189.3%200.8%20L193.6%200.4%20L198.9%200.4%20L201.0%200.5%20L204.5%200.3%20L208.4%200.0%20L211.5%200.2%20L215.9%200.2%20L218.4%200.5%20L221.0%200.6%20L223.6%200.0%20L228.6%200.5%20L231.4%200.7%20L236.6%200.2%20L241.6%200.3%20L244.6%200.2%20L248.7%200.1%20L250.8%200.2%20L253.0%200.6%20L257.0%200.5%20L260.2%200.9%20L265.7%200.4%20L270.8%200.2%20L274.5%200.4%20L279.5%200.7%20L281.5%200.1%20L286.0%200.2%20L289.1%200.3%20L291.7%200.1%20L296.2%200.7%20L298.5%200.1%20L301.1%200.2%20L303.2%200.7%20L305.8%200.4%20L307.9%200.2%20L312.9%200.1%20L317.5%200.4%20L321.6%200.0%20L325.6%200.8%20L329.3%200.1%20L333.7%200.0%20L333.9%20-0.3%20L335.2%201.1%20L337.1%204.0%20L338.4%204.9%20L341.9%205.7%20L341.3%208.9%20L343.3%2010.2%20L345.2%2011.4%20L346.8%2013.7%20L348.1%2015.7%20L349.9%2017.5%20L351.5%2019.6%20L353.3%2020.2%20L356.5%2019.9%20L357.1%2024.3%20L359.0%2026.0%20L361.6%2025.2%20L362.7%2026.8%20L365.8%2028.3%20L366.5%2030.9%20L369.5%2031.6%20L372.4%2033.7%20L374.3%2034.3%20L375.9%2035.6%20L377.6%2037.4%20L380.2%2038.3%20L382.6%2039.0%20L387.5%2038.3%20L387.8%2041.1%20L390.5%2040.3%20L392.4%2042.2%20L396.0%2042.1%20L396.6%2044.3%20L401.1%2043.9%20L399.6%2047.1%20L399.6%2047.1%20L399.3%2052.3%20L398.9%2056.0%20L396.8%2059.2%20L399.1%2061.2%20L395.6%2063.9%20L399.9%2067.3%20L400.0%2072.5%20L399.3%2077.3%20L399.3%2080.4%20L399.9%2083.0%20L398.9%2085.5%20L399.0%2090.5%20L398.9%2095.6%20L398.9%2098.5%20L398.7%20102.8%20L399.4%20105.1%20L398.2%20108.0%20L398.4%20111.5%20L398.3%20115.4%20L399.3%20118.4%20L398.9%20123.1%20L399.0%20125.2%20L399.5%20127.7%20L398.6%20131.2%20L398.6%20135.3%20L398.5%20140.5%20L399.3%20143.7%20L399.6%20146.3%20L399.5%20150.6%20L398.8%20153.5%20L399.7%20155.6%20L399.2%20158.4%20L399.3%20162.5%20L399.6%20167.6%20L399.4%20171.2%20L399.7%20176.4%20L399.9%20179.6%20L399.7%20181.7%20L399.6%20185.0%20L399.9%20188.7%20L399.9%20191.3%20L399.5%20193.3%20L399.5%20196.0%20L399.8%20200.3%20L399.5%20204.1%20L399.6%20208.0%20L399.5%20212.7%20L399.8%20214.8%20L399.9%20217.4%20L400.0%20220.4%20L399.7%20225.8%20L399.5%20228.6%20L399.7%20232.8%20L399.7%20236.0%20L399.5%20238.9%20L399.7%20243.2%20L399.9%20245.3%20L397.1%20247.7%20L399.4%20251.3%20L399.0%20256.6%20L399.6%20260.7%20L394.7%20265.0%20L399.2%20267.8%20L399.9%20272.9%20L399.2%20275.5%20L399.8%20279.5%20L399.8%20282.1%20L399.5%20287.3%20L400.0%20290.3%20L399.6%20292.3%20L399.4%20296.7%20L399.4%20300.0%20L400.0%20300.0%20L0%20300.0%20L0.0%20300.0%20L0.0%200%20Z%27%2F%3E%3C%2Fsvg%3E");
  --tear-sauces: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27400%27%20height%3D%27300%27%20viewBox%3D%270%200%20400%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M0.0%200.0%20L400%200.0%20L399.6%200.0%20L399.9%202.8%20L398.8%208.0%20L399.6%2012.5%20L399.1%2016.1%20L399.9%2020.4%20L400.0%2024.1%20L399.9%2028.0%20L399.8%2031.0%20L399.8%2033.7%20L400.0%2037.5%20L399.9%2042.8%20L399.8%2045.8%20L399.3%2050.9%20L399.6%2053.7%20L399.9%2056.6%20L399.8%2061.4%20L399.9%2066.7%20L399.5%2070.1%20L399.7%2073.5%20L399.8%2075.8%20L399.5%2079.9%20L399.4%2084.2%20L399.5%2088.8%20L399.9%2090.9%20L399.9%2095.5%20L399.4%2099.0%20L399.9%20104.1%20L400.0%20109.0%20L399.5%20112.1%20L399.6%20114.4%20L399.1%20119.5%20L399.3%20123.0%20L399.8%20125.2%20L399.6%20128.5%20L399.6%20132.4%20L396.5%20137.4%20L399.3%20141.4%20L399.6%20143.8%20L399.7%20148.8%20L399.6%20153.2%20L396.3%20156.2%20L399.3%20158.9%20L395.0%20162.9%20L399.5%20167.7%20L398.7%20171.2%20L396.3%20175.0%20L399.8%20180.3%20L399.4%20183.9%20L398.8%20186.5%20L399.3%20190.8%20L398.8%20193.5%20L399.7%20198.6%20L399.1%20201.3%20L399.7%20205.9%20L399.1%20210.8%20L399.7%20214.3%20L399.6%20218.0%20L399.7%20221.1%20L399.3%20224.1%20L399.6%20226.2%20L398.7%20228.6%20L398.7%20232.9%20L399.6%20238.0%20L399.3%20243.0%20L399.2%20245.4%20L399.1%20249.0%20L399.4%20253.6%20L399.2%20256.3%20L399.6%20259.3%20L399.6%20259.4%20L396.4%20260.3%20L393.4%20259.4%20L389.4%20259.4%20L387.0%20260.8%20L384.9%20260.7%20L381.1%20260.0%20L378.7%20260.5%20L377.4%20261.9%20L374.0%20263.1%20L371.8%20262.7%20L369.0%20264.5%20L366.3%20265.8%20L364.4%20266.4%20L363.1%20267.6%20L360.8%20269.4%20L358.7%20268.7%20L357.3%20270.1%20L356.3%20272.6%20L354.1%20273.6%20L352.6%20273.9%20L351.3%20274.9%20L350.4%20277.5%20L347.9%20279.8%20L346.1%20280.1%20L343.6%20282.9%20L343.2%20286.4%20L342.1%20287.4%20L340.2%20290.6%20L338.5%20290.2%20L338.5%20290.2%20L334.5%20291.4%20L331.5%20288.3%20L326.2%20291.1%20L323.5%20289.3%20L319.7%20292.0%20L317.6%20288.7%20L313.8%20290.3%20L309.8%20292.1%20L307.3%20290.6%20L302.4%20291.1%20L299.3%20291.8%20L294.3%20289.5%20L291.4%20290.6%20L286.2%20289.6%20L283.2%20288.8%20L279.7%20289.1%20L276.4%20290.1%20L271.4%20289.1%20L268.3%20291.1%20L262.9%20289.0%20L257.7%20291.0%20L255.3%20291.5%20L249.8%20291.2%20L247.2%20289.4%20L242.4%20288.6%20L238.0%20287.0%20L233.0%20287.0%20L229.8%20288.6%20L227.7%20290.0%20L222.5%20289.8%20L220.3%20288.2%20L214.9%20287.8%20L210.2%20290.0%20L205.2%20289.2%20L200.8%20286.9%20L197.7%20287.9%20L193.1%20288.6%20L190.8%20289.9%20L188.2%20288.2%20L184.8%20286.7%20L180.7%20287.0%20L178.5%20289.4%20L173.6%20289.7%20L168.5%20287.8%20L165.4%20286.4%20L162.7%20286.4%20L160.3%20285.9%20L157.4%20287.2%20L154.4%20290.0%20L151.3%20290.0%20L147.1%20287.4%20L141.9%20287.2%20L136.6%20289.0%20L131.8%20290.4%20L129.0%20286.9%20L123.9%20289.0%20L121.0%20286.6%20L117.5%20287.3%20L112.4%20286.7%20L109.9%20286.7%20L104.7%20289.1%20L100.8%20287.1%20L96.5%20288.1%20L93.5%20287.6%20L88.9%20290.1%20L85.6%20286.5%20L82.4%20288.7%20L80.4%20286.4%20L76.7%20287.6%20L72.8%20286.9%20L69.6%20287.1%20L64.7%20286.0%20L62.6%20289.5%20L58.7%20288.3%20L54.7%20287.6%20L49.6%20288.1%20L45.1%20288.9%20L41.8%20289.1%20L38.6%20286.8%20L34.7%20287.0%20L32.5%20285.3%20L30.4%20286.0%20L25.2%20288.6%20L20.5%20287.1%20L15.7%20289.9%20L10.2%20286.5%20L6.7%20287.0%20L4.0%20286.3%20L0.1%20288.3%20L0.0%20288.3%20L0.1%20300.0%20L0.4%20295.0%20L0.9%20291.1%20L1.1%20286.2%20L1.3%20282.1%20L1.0%20279.1%20L0.4%20274.4%20L4.0%20269.9%20L0.2%20266.3%20L0.5%20263.3%20L0.8%20260.5%20L1.5%20255.6%20L0.8%20252.4%20L1.9%20247.0%20L4.5%20244.5%20L1.2%20242.4%20L1.1%20238.8%20L5.8%20233.4%20L1.1%20230.8%20L1.6%20227.5%20L1.1%20224.1%20L1.1%20218.8%20L0.7%20214.3%20L1.9%20209.9%20L1.6%20204.5%20L1.7%20201.5%20L1.4%20196.6%20L0.9%20191.7%20L4.4%20188.3%20L1.6%20185.8%20L1.3%20181.0%20L1.4%20178.6%20L0.9%20174.3%20L1.1%20172.0%20L1.1%20169.2%20L1.0%20164.2%20L1.8%20162.2%20L1.3%20158.4%20L1.7%20155.4%20L2.2%20150.4%20L2.0%20147.1%20L2.2%20144.2%20L1.3%20141.9%20L1.3%20138.1%20L2.2%20132.9%20L1.8%20129.9%20L1.4%20124.9%20L1.9%20122.4%20L1.9%20119.7%20L2.4%20116.4%20L2.2%20112.4%20L2.1%20108.4%20L1.1%20103.6%20L1.4%20100.4%20L1.9%2098.2%20L1.8%2093.9%20L2.4%2091.6%20L1.3%2087.0%20L2.5%2082.6%20L2.1%2078.0%20L1.9%2075.3%20L2.3%2072.2%20L2.1%2069.1%20L4.4%2064.5%20L1.9%2059.9%20L2.2%2057.4%20L2.2%2054.3%20L1.6%2049.9%20L1.5%2047.0%20L2.4%2042.0%20L1.3%2036.9%20L2.2%2033.3%20L1.9%2031.2%20L2.3%2028.3%20L1.8%2023.2%20L1.4%2018.1%20L1.7%2015.5%20L1.2%2010.7%20L1.6%207.6%20L1.4%203.2%20L1.4%200.0%20Z%27%2F%3E%3C%2Fsvg%3E");
  --tear-story: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27400%27%20height%3D%27300%27%20viewBox%3D%270%200%20400%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M400%200.0%20L400.0%200.0%20L400.0%20300%20L400.0%20289.1%20L396.2%20291.5%20L391.8%20288.2%20L386.8%20289.0%20L382.5%20291.3%20L379.4%20290.0%20L374.7%20290.6%20L371.8%20290.4%20L369.3%20289.3%20L364.2%20290.3%20L361.1%20289.5%20L356.8%20292.4%20L352.6%20289.3%20L349.0%20288.8%20L346.8%20289.2%20L344.0%20290.9%20L340.3%20290.6%20L335.5%20289.2%20L332.8%20291.5%20L329.9%20291.8%20L324.7%20289.6%20L321.0%20287.7%20L317.4%20291.1%20L312.3%20291.4%20L307.5%20292.1%20L304.3%20289.4%20L300.9%20289.5%20L298.6%20288.4%20L294.4%20287.8%20L290.2%20291.7%20L288.1%20288.3%20L284.6%20289.3%20L280.8%20290.4%20L277.1%20290.6%20L274.7%20289.0%20L271.2%20288.2%20L268.9%20289.0%20L264.9%20287.9%20L262.3%20291.8%20L257.9%20288.7%20L254.9%20289.9%20L250.0%20288.5%20L246.8%20288.0%20L243.2%20291.3%20L240.5%20288.0%20L236.1%20290.8%20L233.5%20290.3%20L230.1%20291.9%20L227.6%20291.8%20L224.3%20290.6%20L220.8%20290.4%20L218.7%20290.2%20L215.6%20291.8%20L211.2%20289.5%20L206.2%20290.7%20L202.2%20289.2%20L196.7%20291.0%20L192.7%20292.0%20L187.5%20291.3%20L182.8%20290.4%20L179.1%20292.4%20L174.0%20292.4%20L171.1%20290.4%20L166.0%20289.0%20L161.1%20291.8%20L158.8%20290.9%20L153.3%20288.9%20L148.9%20289.5%20L143.7%20291.0%20L141.0%20290.6%20L137.5%20291.6%20L134.6%20289.8%20L129.8%20292.1%20L124.8%20292.0%20L122.5%20292.3%20L117.7%20291.4%20L112.9%20289.8%20L108.8%20288.5%20L106.1%20288.7%20L103.0%20292.4%20L100.1%20292.0%20L96.7%20290.2%20L93.7%20290.4%20L89.8%20291.9%20L87.4%20291.7%20L84.7%20292.4%20L80.2%20291.3%20L77.6%20290.2%20L73.6%20289.7%20L69.2%20291.2%20L66.9%20290.3%20L62.0%20284.8%20L59.6%20291.4%20L55.7%20288.1%20L51.6%20289.4%20L48.8%20288.4%20L46.8%20289.7%20L42.0%20288.3%20L38.3%20288.7%20L34.2%20289.6%20L32.0%20287.9%20L26.8%20290.3%20L24.5%20290.6%20L19.7%20289.8%20L17.0%20291.1%20L14.1%20290.1%20L10.6%20291.1%20L8.6%20290.5%20L6.1%20287.6%20L2.7%20291.8%20L0.1%20287.5%20L0.0%20287.5%20L0.8%20300.0%20L0.9%20296.2%20L0.5%20293.7%20L1.5%20289.6%20L1.0%20286.1%20L0.9%20281.2%20L1.0%20276.8%20L1.8%20274.4%20L1.6%20269.4%20L1.5%20265.7%20L1.0%20261.1%20L1.4%20258.9%20L1.4%20255.3%20L0.9%20252.5%20L0.8%20247.8%20L0.6%20244.7%20L1.5%20240.9%20L1.3%20236.7%20L1.3%20233.0%20L1.6%20230.8%20L1.3%20226.3%20L1.1%20224.1%20L1.4%20219.2%20L1.0%20215.3%20L3.6%20212.1%20L1.4%20208.0%20L1.0%20204.7%20L0.5%20202.3%20L0.7%20197.4%20L1.4%20195.1%20L1.6%20190.3%20L1.1%20185.7%20L0.8%20180.5%20L1.2%20176.7%20L1.3%20173.2%20L1.4%20168.9%20L1.6%20163.8%20L2.4%20160.6%20L1.9%20157.5%20L6.0%20154.1%20L1.7%20150.8%20L1.8%20146.9%20L2.2%20144.8%20L1.7%20141.3%20L1.5%20136.7%20L1.9%20131.9%20L4.3%20129.5%20L2.2%20126.9%20L2.0%20123.6%20L1.9%20121.3%20L2.0%20117.9%20L2.1%20114.8%20L1.9%20112.7%20L1.8%20109.6%20L1.9%20107.6%20L4.7%20102.2%20L1.5%2098.1%20L2.2%2094.0%20L2.2%2090.1%20L1.6%2086.1%20L1.9%2080.8%20L0.9%2077.4%20L1.4%2074.6%20L2.0%2071.0%20L0.8%2068.9%20L0.9%2066.5%20L1.4%2062.6%20L1.4%2057.7%20L2.8%2059.2%20L5.2%2058.7%20L3.8%2055.0%20L5.7%2053.7%20L6.1%2051.1%20L7.7%2047.9%20L9.5%2045.3%20L10.8%2043.0%20L14.3%2041.8%20L15.0%2038.5%20L15.7%2036.9%20L16.8%2035.2%20L18.4%2034.1%20L19.9%2031.6%20L22.5%2031.4%20L23.2%2029.0%20L24.3%2026.5%20L26.6%2025.8%20L27.6%2024.1%20L28.5%2023.0%20L30.6%2020.8%20L32.3%2020.0%20L36.2%2018.9%20L38.0%2016.2%20L39.5%2014.8%20L41.7%2013.8%20L42.2%2011.7%20L44.8%2011.3%20L47.4%209.0%20L49.3%206.9%20L51.9%206.9%20L54.5%204.5%20L58.4%203.6%20L59.8%202.0%20L62.0%201.3%20L62.0%200.0%20Z%27%2F%3E%3C%2Fsvg%3E");

  --tape-end: polygon(0.0px 0.0px, 2.09px 4.0px, 0.0px 8.0px, 2.48px 12.0px, 0.0px 16.0px, 2.24px 20.0px, 0.0px 24.0px, 2.48px 28.0px, 0.0px 32.0px, 2.23px 36.0px, 0.0px 40.0px, 2.07px 44.0px, 0.0px 48.0px, 2.34px 52.0px, 0.0px 56.0px, 2.21px 60.0px, calc(100% - 0.0px) 60.0px, calc(100% - 2.21px) 56.0px, calc(100% - 0.0px) 52.0px, calc(100% - 2.14px) 48.0px, calc(100% - 0.0px) 44.0px, calc(100% - 2.37px) 40.0px, calc(100% - 0.0px) 36.0px, calc(100% - 2.38px) 32.0px, calc(100% - 0.0px) 28.0px, calc(100% - 2.01px) 24.0px, calc(100% - 0.0px) 20.0px, calc(100% - 2.25px) 16.0px, calc(100% - 0.0px) 12.0px, calc(100% - 1.98px) 8.0px, calc(100% - 0.0px) 4.0px, calc(100% - 2.1px) 0.0px);
  --tape-booth-a-len: 160px;
  --tape-jars-a-len: 88px;
  --tape-jars-b-len: 97px;
  --tape-sauces-a-len: 99px;
  --tape-sauces-b-len: 108px;
  --tape-story-a-len: 156px;
  --tape-story-b-len: 137px;

  --stain-booth:
    radial-gradient(ellipse 30% 30% at 28% 7%, rgba(46,50,32,0.60), transparent 60%),
    radial-gradient(ellipse 27% 27% at 17% 21%, rgba(53,39,40,0.46), transparent 65%),
    radial-gradient(ellipse 40% 23% at 81% 74%, rgba(45,62,23,0.46), transparent 63%),
    radial-gradient(ellipse 24% 28% at 99% 69%, rgba(80,43,36,0.47), transparent 65%),
    radial-gradient(ellipse 37% 27% at 4% 73%, rgba(62,45,19,0.34), transparent 62%),
    radial-gradient(ellipse 33% 38% at 43% 67%, rgba(84,43,38,0.43), transparent 69%),
    linear-gradient(79deg, transparent 18.5%, rgba(66,48,30,0.12) 22.5%, transparent 26.5%),
    linear-gradient(129deg, transparent 16.2%, rgba(66,48,30,0.13) 20.2%, transparent 24.2%);
  --stain-jars:
    radial-gradient(ellipse 45% 18% at 9% 42%, rgba(58,59,31,0.59), transparent 59%),
    radial-gradient(ellipse 39% 16% at 101% 97%, rgba(56,39,36,0.43), transparent 63%),
    radial-gradient(ellipse 45% 29% at 88% 8%, rgba(67,40,38,0.52), transparent 64%),
    radial-gradient(ellipse 19% 31% at 33% 103%, rgba(76,43,33,0.38), transparent 71%),
    radial-gradient(ellipse 38% 38% at 5% 91%, rgba(43,56,36,0.39), transparent 63%),
    radial-gradient(ellipse 32% 21% at 41% 47%, rgba(79,30,23,0.37), transparent 64%),
    radial-gradient(ellipse 41% 22% at 82% 11%, rgba(52,50,34,0.42), transparent 67%),
    radial-gradient(ellipse 45% 23% at 14% 29%, rgba(87,58,17,0.39), transparent 61%),
    linear-gradient(119deg, transparent 34.3%, rgba(66,48,30,0.14) 38.3%, transparent 42.3%),
    linear-gradient(131deg, transparent 55.8%, rgba(66,48,30,0.14) 59.8%, transparent 63.8%);
  --stain-sauces:
    radial-gradient(ellipse 39% 17% at 65% 48%, rgba(65,64,21,0.52), transparent 73%),
    radial-gradient(ellipse 27% 33% at 28% 31%, rgba(87,32,37,0.47), transparent 67%),
    radial-gradient(ellipse 46% 44% at 40% 47%, rgba(50,63,36,0.40), transparent 69%),
    radial-gradient(ellipse 48% 20% at 94% 30%, rgba(45,46,23,0.41), transparent 73%),
    radial-gradient(ellipse 15% 18% at 60% 28%, rgba(92,41,22,0.49), transparent 64%),
    radial-gradient(ellipse 26% 44% at 46% 6%, rgba(87,43,32,0.56), transparent 68%),
    radial-gradient(ellipse 45% 39% at 92% 96%, rgba(44,52,16,0.55), transparent 59%),
    radial-gradient(ellipse 38% 20% at 14% 69%, rgba(57,50,31,0.56), transparent 64%);
  --stain-story:
    radial-gradient(ellipse 49% 35% at 71% 88%, rgba(44,38,28,0.57), transparent 62%),
    radial-gradient(ellipse 30% 21% at 88% 89%, rgba(70,45,31,0.48), transparent 67%),
    radial-gradient(ellipse 22% 36% at 61% 6%, rgba(75,40,38,0.34), transparent 72%),
    radial-gradient(ellipse 20% 13% at 47% 77%, rgba(59,37,16,0.61), transparent 67%),
    radial-gradient(ellipse 22% 40% at 66% 53%, rgba(56,58,16,0.55), transparent 69%),
    radial-gradient(ellipse 18% 42% at 80% -2%, rgba(71,57,20,0.48), transparent 68%);
}
/* >>> end generated <<< */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is mandatory alongside the width/height attributes. Those
   attributes are presentational hints, so without this the height is pinned
   to the intrinsic pixel value while CSS sets the width, and every image
   stretches. Rules that set an explicit height, like the hero, still win. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* DRAFT RIBBON: preview scaffolding. It says out loud that the product
   list, prices and heat ratings are not confirmed yet. Delete this rule
   and the matching <div class="draft"> when the owners sign off. */
.draft {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #2A211C, #2A211C 12px, #221A16 12px, #221A16 24px);
  color: #E8D9C4;
  font-family: var(--display);
  font-size: 13.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
}

.shell { max-width: 1180px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* Typewriter for the small print, like a case file. .maker follows and
   puts the two maker names back into the product face. */
.eyebrow {
  font-family: var(--display);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--chile-ink); margin: 0;
}

/* The two maker names are set like product names, same face and size, which
   is the shipping design. Stated as the default rather than behind an
   attribute so it holds with no JS and with the type picker deleted. The
   other type options put them back to plain eyebrows. */
.maker {
  font-family: var(--name);
  font-style: var(--name-style);
  font-weight: var(--name-weight);
  font-size: var(--name-size);
  color: var(--name-color);
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Cheap offset printing never quite lined the plates up. A red ghost a
   hair off the black sells the period more than any texture does. */
h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.06; letter-spacing: -0.01em;
  text-wrap: balance; margin: 10px 0 0;
  text-shadow: 1.6px 1.2px 0 color-mix(in srgb, var(--chile) 30%, transparent);
}

/* The ghost has to push harder to read against a dark ground. */
:root[data-theme="dark"] h2 {
  text-shadow: 1.6px 1.2px 0 color-mix(in srgb, var(--chile) 42%, transparent);
}

.lede { font-size: 17.5px; color: var(--ink-mid); max-width: 60ch; margin: 14px 0 0; }

section { padding: clamp(56px, 9vw, 104px) 0; }
.sec-head { margin-bottom: 40px; }

/* ---------------- announcement band ---------------- */

/* A strip of paper torn off along the bottom. Two mask layers: a solid
   rectangle down to the fringe, then the ragged strip inside it. They union
   (mask-composite defaults to add), so the rip bites up into the band as well
   as hanging below it.

   The band overlaps whatever follows by the fringe height, because a tear has
   to expose what is UNDER it. Without that it exposes the page instead, and
   the next section's straight top edge reads as a drop shadow on a torn edge.

   `priority` in the sheet picks one of the three rules below. */
.shout {
  --fringe: 20px;
  position: relative;
  z-index: 1;
  margin-bottom: calc(-1 * var(--fringe));
  padding: 15px var(--pad) calc(13px + var(--fringe));
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  background: var(--chile);
  color: #FFF6F2;
  -webkit-mask-image: linear-gradient(#000, #000), var(--tear-band);
  mask-image: linear-gradient(#000, #000), var(--tear-band);
  -webkit-mask-size: 100% calc(100% - var(--fringe) + 1px), 100% var(--fringe);
  mask-size: 100% calc(100% - var(--fringe) + 1px), 100% var(--fringe);
  -webkit-mask-position: top left, bottom left;
  mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
}

.shout-when {
  flex: none;
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,246,242,0.45);
  padding: 3px 9px 2px;
  white-space: nowrap;
}

.shout-say {
  flex: 1 1 18ch;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.shout-more {
  flex: none;
  font-family: var(--cond);
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #FFF6F2;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,246,242,0.5);
}
.shout-more:hover { border-bottom-color: #FFF6F2; }
.shout-more:focus-visible { outline: 3px solid var(--flame); outline-offset: 3px; }

/* Quiet: still the first thing on the page, but it does not shout. Paper
   ground, ink text, no red. */
.shout-quiet {
  background: var(--paper-sunk);
  color: var(--ink);
  border-top: 1px solid var(--rule);
}
.shout-quiet .shout-say { font-weight: 400; font-size: 16px; }
.shout-quiet .shout-when { border-color: var(--rule-firm); color: var(--ink-faint); }
.shout-quiet .shout-more { color: var(--chile-ink); border-bottom-color: var(--rule-firm); }
.shout-quiet .shout-more:hover { border-bottom-color: var(--chile-ink); }

/* Urgent: bigger type, and it is the only one that appears on every page. */
.shout-urgent { padding-top: 19px; padding-bottom: calc(17px + var(--fringe)); }
.shout-urgent .shout-say { font-size: 19.5px; }

@media (max-width: 560px) {
  .shout-say { flex-basis: 100%; }
  .shout-urgent .shout-say { font-size: 18px; }
}

/* ---------------- videos ---------------- */

/* The lens is a wash, not a picture: one chile ink whose opacity follows the
   photograph's own tones, so the camera prints and the studio background
   drops to bare paper. It fills the right of the section head and is
   decorative throughout — the heading carries the meaning. */
.watch { position: relative; overflow: hidden; background: var(--paper-sunk); }

/* The stylesheet reaches nothing outside itself, so the plate is an <img>
   in the markup like every other image here, not a background.

   It hangs off the section, not off the heading block. Centring it on the
   heading made its top edge depend on how many lines the lede wrapped to, so
   at some widths it rose above the section and `overflow: hidden` sliced the
   camera in half. Anchored at the section's top edge it is flush with the
   barbed wire at every width, and only ever runs on behind the cards.

   The right offset lands its edge on the shell's content edge, so it lines up
   with the cards and the text rather than bleeding off the viewport: past
   1180px that is the centring margin plus the gutter, and below it the max()
   falls back to the gutter alone. */
.watch-lens {
  position: absolute;
  top: 0;
  right: max(var(--pad), calc((100% - 1180px) / 2 + var(--pad)));
  width: 352px;
  height: auto;
  opacity: 0.46;
  pointer-events: none;
  z-index: 0;
}
.watch .shell { position: relative; z-index: 1; }
.watch-head .lede { max-width: 54ch; }

:root[data-theme="dark"] .watch-lens {
  opacity: 0.42;
  filter: brightness(1.55) saturate(1.1);
}

@media (max-width: 760px) {
  .watch-lens { width: 236px; opacity: 0.3; }
}

.reels {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
}

.reel {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.reel:hover .reel-play { transform: scale(1.08); }
.reel:focus-visible { outline: 3px solid var(--flame); outline-offset: 2px; }

.reel-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.reel-thumb img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  filter: sepia(0.22) saturate(0.88) contrast(1.06);
}

/* A facade, not an embed: the card is a link, so nothing of YouTube's loads
   until someone chooses to go there. */
.reel-play {
  position: absolute;
  left: 50%; top: 50%;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--chile) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2720%27%3E%3Cpath%20fill%3D%27%23FFF6F2%27%20d%3D%27M1%201%20L17%2010%20L1%2019%20Z%27%2F%3E%3C%2Fsvg%3E");
  box-shadow: 0 2px 12px rgba(0,0,0,0.45);
  transition: transform 140ms ease;
}
@media (prefers-reduced-motion: reduce) { .reel-play { transition: none; } }

.reel-body { display: grid; gap: 6px; padding: 14px 15px 16px; }
.reel-when {
  font-family: var(--cond);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-faint);
}
.reel-name {
  font-family: var(--name);
  font-style: var(--name-style);
  font-weight: var(--name-weight);
  font-size: 20px; line-height: 1.2;
  color: var(--name-color);
}
.reel-description { font-size: 14.5px; line-height: 1.5; color: var(--ink-mid); }

/* ---------------- hero ---------------- */

.hero { position: relative; background: var(--char); color: var(--bone); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }

.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%;
  filter: sepia(0.30) saturate(0.78) contrast(1.20);
}

.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(14,10,8,0.90) 0%, rgba(14,10,8,0.55) 40%, rgba(14,10,8,0.88) 100%),
    radial-gradient(ellipse at 22% 40%, rgba(196,36,27,0.26), transparent 62%);
}

.hero-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
  padding: clamp(44px, 8vw, 84px) var(--pad);
  max-width: 1180px; margin: 0 auto;
}

/* Tracks the width of the "Homemade in Elgin, Texas" line exactly:
   that text renders at 14.25x its font-size, and the font-size is
   clamp(13px, 1.6vw, 15px), so 14.25 x that gives the clamp below. */
.hero-logo {
  width: clamp(185px, 22.8vw, 214px);
  border-radius: 50%;
  background: rgba(232,224,205,0.92);
  padding: 9px;
  box-shadow: 0 6px 34px rgba(0,0,0,0.75);
  filter: saturate(0.88) contrast(1.05);
}

.hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(36px, 6.8vw, 74px);
  line-height: 1.02; letter-spacing: -0.005em;
  margin: 0; max-width: 15ch; text-wrap: balance;
  color: #FBF6EF;
  text-shadow: 2px -1.5px 0 color-mix(in srgb, var(--chile) 55%, transparent),
               0 3px 0 rgba(0,0,0,0.30), 0 2px 26px rgba(0,0,0,0.62);
}

.hero h1 em { font-style: normal; color: var(--flame); display: block; }

.hero-sub {
  font-size: clamp(16.5px, 2vw, 20px);
  color: #E4D8C8; max-width: 46ch; margin: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}

.hero-place {
  font-family: var(--cond);
  font-size: clamp(13px, 1.6vw, 15px);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #E8A87C; margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.7);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 6px; }

.btn {
  font-family: var(--cond);
  font-size: 18px; font-weight: 600;
  letter-spacing: 0.075em; text-transform: uppercase;
  text-decoration: none; padding: 13px 27px;
  border: 2px solid transparent;
  display: inline-block;
  transition: transform 130ms ease, background 130ms ease, border-color 130ms ease;
}

.btn-primary { background: var(--chile); color: #FFF6F2; border-color: var(--chile); }
.btn-primary:hover { background: var(--chile-deep); border-color: var(--chile-deep); transform: translateY(-1px); }
.btn-ghost { background: rgba(255,255,255,0.05); color: #F6EFE6; border-color: rgba(246,239,230,0.5); }
.btn-ghost:hover { background: rgba(255,255,255,0.13); border-color: #F6EFE6; transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--flame); outline-offset: 3px; }

.stub {
  font-family: var(--display);
  font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: #BE5F27; border: 1px dashed currentColor;
  border-radius: 2px; padding: 2px 7px;
  display: inline-block; vertical-align: middle;
}

/* ---------------- category strip ---------------- */

.strip { background: var(--char-soft); color: var(--bone); }
.strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.strip li { padding: 26px 18px; text-align: center; border-right: 1px solid rgba(244,237,227,0.13); display: flex; flex-direction: column; gap: 3px; }
.strip li:last-child { border-right: none; }
.strip b { font-family: var(--cond); font-size: 21px; font-weight: 600; letter-spacing: 0.045em; text-transform: uppercase; }
.strip span { font-size: 13.5px; color: #B9A996; }

/* ---------------- heat scale ---------------- */

.heat { display: inline-flex; gap: 3px; align-items: center; }
.heat svg { width: 12px; height: 15px; display: block; fill: var(--heat-off); flex: none; transition: fill 140ms ease; }
.heat svg.heat-on.heat-1 { fill: var(--heat-1); }
.heat svg.heat-on.heat-2 { fill: var(--heat-2); }
.heat svg.heat-on.heat-3 { fill: var(--heat-3); }
.heat svg.heat-on.heat-4 { fill: var(--heat-4); }
.heat svg.heat-on.heat-5 { fill: var(--heat-5); }
/* the hottest flame is nearly white, so it gets an edge to stay legible on paper */
.heat svg.heat-on.heat-6 { fill: var(--heat-6); stroke: var(--heat-6-edge); stroke-width: 0.9; }

.scale-key {
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center;
  padding: 17px 20px;
  background: var(--paper-sunk); border: 1px solid var(--rule);
  margin-bottom: 30px;
}

.scale-key div { display: flex; align-items: center; gap: 9px; }

@media (max-width: 620px) {
  .scale-key { flex-direction: column; align-items: flex-start; gap: 11px; }
}

.scale-key small {
  font-family: var(--cond); font-size: 14px;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-mid);
}

/* ---------------- filter ---------------- */

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }

.filters button {
  font-family: var(--cond); font-size: 15.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; color: var(--ink-mid);
  border: 1.5px solid var(--rule-firm);
  padding: 8px 17px; cursor: pointer;
  transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
}

.filters button:hover { border-color: var(--chile); color: var(--chile-ink); }
.filters button[aria-pressed="true"] { background: var(--chile); border-color: var(--chile); color: #FFF6F2; }
.filters button:focus-visible { outline: 3px solid var(--flame); outline-offset: 2px; }

/* ---------------- product grid ---------------- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }

.prod {
  background: var(--card); border: 1px solid var(--rule-firm);
  padding: 21px 22px 19px;
  display: flex; flex-direction: column; gap: 9px; position: relative;
}

.prod::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--chile); opacity: 0.85;
}

/* The rail climbs from the base red to the item's heat colour. Levels at or
   below the base are milder than red, so they stay solid: fading backwards
   down the scale would read as hotter, not cooler. */
.prod.heat-1::before { background: var(--heat-1); opacity: 1; }
.prod.heat-2::before { background: var(--heat-2); opacity: 1; }
.prod.heat-3::before { background: linear-gradient(to bottom, var(--chile), var(--heat-3)); opacity: 1; }
.prod.heat-4::before { background: linear-gradient(to bottom, var(--chile), var(--heat-4)); opacity: 1; }
.prod.heat-5::before { background: linear-gradient(to bottom, var(--chile), var(--heat-5)); opacity: 1; }
.prod.heat-6::before { background: linear-gradient(to bottom, var(--chile), var(--heat-6)); opacity: 1; }

.prod.sold-out { opacity: 0.62; }
.prod.sold-out::before { background: var(--rule-firm); }

.prod h3 {
  font-family: var(--name);
  font-style: var(--name-style);
  font-weight: var(--name-weight);
  font-size: var(--name-size);
  color: var(--name-color);
  line-height: 1.14; letter-spacing: 0.012em; margin: 0; text-wrap: balance;
}

.prod-made { font-size: 14px; color: var(--ink-mid); line-height: 1.5; flex: 1; margin: 0; }

.prod-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 11px; border-top: 1px solid var(--rule);
}

.price { font-family: var(--cond); font-size: 19px; font-weight: 600; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.price.sold-out { color: var(--ink-faint); font-size: 15px; letter-spacing: 0.09em; text-transform: uppercase; }
.price-qt { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-faint); letter-spacing: 0.05em; text-align: right; }

.heat-word {
  font-family: var(--display); font-size: 11.5px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 2px;
}

.grid-empty { padding: 34px 4px; color: var(--ink-mid); font-style: italic; display: none; }

/* Controls that do nothing without script. The pages render from a sheet and
   work without JavaScript, but these two do not, so they stay out of the way
   rather than sitting there inert. The class is set by one line in the head,
   before paint, so neither ever flashes. */
.filters, .theme-toggle { display: none; }
.js .filters { display: flex; }
.js .theme-toggle { display: inline-block; }

/* ---------------- catalog ---------------- */

/* Sits under a featured grid on the front page and reads as the way through
   to the rest, not as another jar. Hidden until the script knows the count. */
.see-all-row { margin: 24px 0 0; }

.see-all {
  display: inline-block;
  font-family: var(--cond); font-size: 15.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mid); text-decoration: none;
  border: 1.5px solid var(--rule-firm);
  padding: 9px 19px;
  transition: color 130ms ease, border-color 130ms ease;
}
.see-all:hover { border-color: var(--chile); color: var(--chile-ink); }
.see-all:focus-visible { outline: 3px solid var(--flame); outline-offset: 2px; }

/* Shown only when /data is older than six hours — quiet, not an alarm. */
.data-age {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--ink-mid);
}

/* The only control on a card, and only on one that is out. Asking is how a
   customer votes for what gets put up next. */
.ask {
  /* Sits where a price would, so it matches the price's weight and optical
     size rather than the filter buttons' up top. */
  flex: none;
  font-family: var(--cond); font-size: 14.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  /* Full-strength ink, not the muted tone the rest of the card uses: the card
     is dimmed to 0.62 and that composite drags --ink-mid under 3:1. The one
     thing on a sold-out card you can still act on has to stay readable. */
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--rule-firm);
  padding: 6px 14px; cursor: pointer;
  transition: color 130ms ease, border-color 130ms ease;
}
.ask:hover { border-color: var(--chile); color: var(--chile-ink); }
.ask:focus-visible { outline: 3px solid var(--flame); outline-offset: 2px; }

/* The catalog's masthead: dark like the hero so the two pages read as one
   site, without the hero's photograph or its height. Colours are the hero's
   own, which are already measured against this ground. */
.page-head {
  background: var(--char); color: var(--bone);
  padding: clamp(30px, 5vw, 52px) 0 clamp(34px, 5vw, 56px);
}
.page-head h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(31px, 5.4vw, 54px);
  line-height: 1.04; color: var(--bone);
  margin: 16px 0 0; max-width: 18ch; text-wrap: balance;
}
.page-head .lede { color: #E4D8C8; max-width: 56ch; }

.page-back {
  font-family: var(--cond); font-size: 14.5px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: #E4D8C8; text-decoration: none;
}
.page-back::before { content: "\2190"; margin-right: 9px; }
.page-back:hover { color: #FFF6F2; }
.page-back:focus-visible { outline: 3px solid var(--flame); outline-offset: 3px; }

.maker-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.maker-jump a {
  font-family: var(--cond); font-size: 15.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #F6EFE6; text-decoration: none;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(246,239,230,0.5);
  padding: 8px 17px;
  transition: background 130ms ease, border-color 130ms ease;
}
.maker-jump a:hover { background: rgba(255,255,255,0.13); border-color: #F6EFE6; }
.maker-jump a:focus-visible { outline: 3px solid var(--flame); outline-offset: 2px; }

/* ---------------- pricing ---------------- */

.pricing { background: var(--paper-sunk); }
.deals { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; margin-top: 34px; }

.deal {
  background: var(--card); border: 1px solid var(--rule);
  border-top: 4px solid var(--chile);
  padding: 26px 25px; display: flex; flex-direction: column; gap: 5px;
}

.deal-what { font-family: var(--cond); font-size: 21px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.deal-single { font-family: var(--display); font-size: 39px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.deal-bulk { font-size: 15.5px; color: var(--chile-ink); font-weight: 600; }
.deal-note { font-size: 14px; color: var(--ink-mid); margin-top: 5px; }

/* ---------------- split blocks ---------------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }
.split img {
  border: 1px solid var(--rule);
  filter: sepia(0.26) saturate(0.76) contrast(1.16);
}

.cal-stub {
  background: var(--card); border: 2px dashed var(--rule-firm);
  padding: 30px 28px;
  display: flex; flex-direction: column; gap: 15px;
}

#cal-rows { display: flex; flex-direction: column; gap: 13px; }

/* Once the two columns sit side by side, cap the list height so a busy
   season does not tower over the photo beside it. Below that width the
   panel is full width and simply grows: a scrolling box inside a scrolling
   page is miserable on a phone. */
@media (min-width: 801px) {
  #cal-rows {
    max-height: 430px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-firm) transparent;
    padding-right: 10px;
  }

  /* macOS hides overlay scrollbars until you scroll, which leaves no hint
     that there is more. Keep this one visible. */
  #cal-rows::-webkit-scrollbar { width: 8px; }
  #cal-rows::-webkit-scrollbar-track { background: transparent; }
  #cal-rows::-webkit-scrollbar-thumb {
    background: var(--rule-firm); border-radius: 4px;
  }
}

.cal-row { display: flex; align-items: baseline; gap: 15px; padding-bottom: 13px; border-bottom: 1px solid var(--rule); }
.cal-row:last-of-type { border-bottom: none; padding-bottom: 0; }

.cal-when {
  font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--chile-ink); min-width: 92px; flex: none;
}

.cal-what { font-size: 15px; }
.cal-what small { display: block; color: var(--ink-mid); font-size: 13.5px; }

.cal-map {
  display: inline-block; margin-top: 3px;
  font-size: 13.5px; color: var(--chile-ink);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--chile) 40%, transparent);
}

.cal-map:hover { text-decoration-color: var(--chile); }
.cal-map:focus-visible { outline: 2px solid var(--chile); outline-offset: 2px; }

.cal-note { margin: 6px 0 0; font-size: 14px; color: var(--ink-mid); }


.cal-empty { margin: 0; color: var(--ink-mid); font-style: italic; }

/* ---------------- story ---------------- */

.story { background: var(--char); color: var(--bone); }
.story h2 { color: #FBF6EF; }
/* --char is dark in both themes, so this cannot follow --flame: the light
   theme's flame only reaches 4.03 on it. */
.story .eyebrow { color: #BE5F27; }

.story-quote {
  font-family: var(--display);
  font-size: clamp(21px, 3.1vw, 31px);
  line-height: 1.33; color: #F2E7D9; margin: 0; max-width: 22ch;
}

.story-body { display: flex; flex-direction: column; gap: 17px; }
.story-body p { margin: 0; color: #CBBDAC; }

/* ---------------- write us ---------------- */

/* One column while the list is closed, which is how the markup ships. */
.write-grid[data-list-closed] { grid-template-columns: 1fr; }

.write-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
@media (max-width: 760px) {
  .write-grid { grid-template-columns: 1fr; }
}

.write-form { display: flex; flex-direction: column; gap: 14px; max-width: 36rem; position: relative; }
.write-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--display); font-size: 13.5px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mid);
}
.write-form input,
.write-form textarea {
  font-family: var(--body); font-size: 16px; line-height: 1.45;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--ink-faint); border-radius: 2px;
  padding: 11px 13px; width: 100%;
}
.write-form input::placeholder,
.write-form textarea::placeholder { color: var(--ink-faint); }
.write-form input:focus-visible,
.write-form textarea:focus-visible {
  outline: 3px solid var(--flame); outline-offset: 2px;
}
.write-form textarea { min-height: 8.5rem; resize: vertical; }
.write-honeypot {
  position: absolute; left: -10000px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}
.write-status {
  min-height: 1.4em; margin: 4px 0 0; font-size: 15px; color: var(--ink-mid);
}
.write-status.is-err { color: var(--chile-ink); }
.write-status a { color: var(--chile-ink); text-decoration: underline; }

/* ---------------- footer ---------------- */

.foot { background: var(--char-soft); color: var(--bone); padding: clamp(48px, 7vw, 78px) 0 34px; }

.foot-top {
  display: flex; flex-wrap: wrap; gap: 26px;
  justify-content: space-between; align-items: flex-end;
  padding-bottom: 32px; border-bottom: 1px solid rgba(244,237,227,0.16);
}

.foot h2 { color: #FBF6EF; margin: 0; }
.foot-meta { display: flex; flex-wrap: wrap; gap: 10px 40px; padding-top: 26px; font-size: 14.5px; color: #B3A492; }
.foot-meta a { color: #E5D6C2; }
.foot-legal { margin-top: 26px; font-size: 13px; color: #867A6B; line-height: 1.6; max-width: 68ch; }

.theme-toggle {
  margin-top: 22px;
  font-family: var(--cond); font-size: 12.5px;
  letter-spacing: 0.13em; text-transform: uppercase;
  background: none; color: #9A8C7C;
  border: 1px solid rgba(244,237,227,0.24); border-radius: 2px;
  padding: 7px 14px; cursor: pointer;
  transition: color 130ms ease, border-color 130ms ease;
}

.theme-toggle:hover { color: #E5D6C2; border-color: rgba(244,237,227,0.55); }
.theme-toggle:focus-visible { outline: 3px solid var(--flame); outline-offset: 2px; }


/* ================= print and texture =================
   Everything below treats the page as a piece of physical print: grain and
   a vignette over the whole thing, barbed wire along the band edges, and
   the photographs handled as torn prints laid on the paper. All of it is
   decorative, none of it affects layout, and the masks and stains it uses
   come from the generated block at the top of this stylesheet. */

/* Print grain and a vignette, so the page reads like a sun-bleached
   one-sheet rather than a clean web page. Both are inert overlays. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background-image: var(--grain);
  background-size: 260px 260px;
  opacity: 0.30; mix-blend-mode: multiply;
}

body::before {
  content: ""; position: fixed; inset: 0; z-index: 59; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(6,5,4,0.42) 100%);
}

:root[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: 0.16; }

/* Barbed wire runs along the top band and both edges of the story block,
   picking up the wire in the logo. Masked rather than drawn in a fixed
   colour so it follows the theme. Section headings keep a plain rule: wire
   under every one of them was too much of a good thing. */
.strip, .story { position: relative; }

.strip::before, .strip::after,
.story::before, .story::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14px;
  background-color: var(--chile);
  opacity: 0.85;
  -webkit-mask-image: var(--wire); mask-image: var(--wire);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: 72px 14px; mask-size: 72px 14px;
  -webkit-mask-position: left center; mask-position: left center;
  pointer-events: none; z-index: 2;
}

/* The wire graphic runs through the middle of its 14px tile, so the strip
   is pulled out by half its height to put the wire itself exactly on the
   boundary rather than 7px inside it. */
.strip::before, .story::before { top: -7px; }
.strip::after,  .story::after  { bottom: -7px; }

/* --- flourishes. All decorative, all aria-hidden, none affect layout.
   Each one takes currentColor from the line it sits on, so it is the same
   red as its heading in both themes rather than a second red beside it. --- */

.flourish { display: inline-block; vertical-align: middle; flex: none; }

/* A small torn print at the head of each maker's section, same treatment as
   the booth photo. The heading block keeps the left column; the print spans
   all three rows on the right. Laid out by explicit row/column so the print
   can simply be appended after the lede rather than wrapping the heading. */
#jars .sec-head, #sauces .sec-head {
  display: grid;
  /* A fraction, not auto, so the print scales with the column the way the
     booth photo does rather than sitting at one fixed size. */
  grid-template-columns: minmax(0, 1fr) minmax(168px, 27%);
  column-gap: 30px;
  align-items: start;
}

#jars .sec-head > .eyebrow,  #sauces .sec-head > .eyebrow  { grid-column: 1; grid-row: 1; }
#jars .sec-head > h2,        #sauces .sec-head > h2        { grid-column: 1; grid-row: 2; }
#jars .sec-head > .lede,     #sauces .sec-head > .lede     { grid-column: 1; grid-row: 3; }

#jars .sec-head > .snapshot, #sauces .sec-head > .snapshot {
  grid-column: 2; grid-row: 1 / span 3; align-self: center;
}

.snapshot-sm { width: 100%; }
.snapshot-sm .snapshot-paper { padding: 5px 5px 9px; }

/* Each print tears differently. Reusing one mask made them read as three
   copies of the same sheet. */
#jars .snapshot-sm .snapshot-paper {
  -webkit-mask-image: var(--tear-jars); mask-image: var(--tear-jars);
}
#sauces .snapshot-sm .snapshot-paper {
  -webkit-mask-image: var(--tear-sauces); mask-image: var(--tear-sauces);
}
#jars .snapshot-sm   { transform: rotate(-1.7deg); }
#sauces .snapshot-sm { transform: rotate(2.0deg); }

/* The batch photo in the story, pinned under the pull quote. */
.story .snapshot-story {
  width: min(100%, 330px); margin-top: 30px;
  transform: rotate(-2.8deg);
}

.snapshot-story .snapshot-paper {
  padding: 6px 6px 11px;
  -webkit-mask-image: var(--tear-story); mask-image: var(--tear-story);
}

@media (max-width: 800px) {
  .story .snapshot-story { width: min(100%, 420px); transform: rotate(-2.2deg); }
}

@media (max-width: 820px) {
  #jars .sec-head, #sauces .sec-head { grid-template-columns: minmax(0, 1fr); }
  #jars .sec-head > .snapshot, #sauces .sec-head > .snapshot {
    grid-column: 1; grid-row: 4; margin-top: 24px; justify-self: start;
  }
  /* Stacked, it has the whole width to itself, so it grows. */
  .snapshot-sm { width: min(100%, 460px); }
  .snapshot-sm .snapshot-paper { padding: 7px 7px 12px; }
}

/* Sized against the maker name it follows, the way the spatter is sized
   against "What it costs": a mark on the line, not a second illustration
   competing with the torn print beside it. */
.flourish-blade {
  width: 54px; height: 36px; margin-left: 12px;
}

.flourish-blade .edge { fill: currentColor; }
.flourish-blade .haft { stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; fill: none; }
.flourish-blade .grip { stroke: currentColor; stroke-width: 7; stroke-linecap: round; fill: none; }
.flourish-blade .hole { fill: var(--paper); }

/* The footer is dark in both themes, so the holes can be a fixed near-black
   punched through it, with a chipped rim catching the light. */
.flourish-holes { width: 118px; height: 52px; margin-left: 18px; }

.flourish-spatter { width: 58px; height: 24px; margin-left: 12px; }
.flourish-spatter .drop { fill: currentColor; }
.flourish-holes .hole { fill: #050403; }
.flourish-holes .rim { fill: none; stroke: rgba(236,222,200,0.38); stroke-width: 1.3; }
.flourish-holes .crack { stroke: rgba(236,222,200,0.30); stroke-width: 1.3; stroke-linecap: round; }

.foot-top h2 { display: flex; align-items: center; flex-wrap: wrap; }



/* Photographs read as printed stock rather than digital: sun-faded,
   pushed contrast, then a dot screen over the top. The palette is left
   alone, the dots are neutral ink. */

/* The plain header: sun-faded stock, no screen. */
/* The booth photo is treated as a physical print torn out and laid on the
   page: bone print border, torn bottom edge, knocked off square. The mask
   clips a filter, so the shadow lives on the outer element where it can
   follow the torn alpha instead of being cut off by it. */
.snapshot {
  display: block;
  transform: rotate(2.4deg);
  /* Tight and dark: a print lying on paper casts a hard little shadow,
     not the soft halo of something floating. */
  filter: drop-shadow(1px 2px 1px rgba(0,0,0,0.6));
  /* Where the tape lands, read by the rules further down. The transform
     above already makes this the containing block for them, so neither the
     print nor the strips need a position of their own. Overhang is capped
     by the page gutter, so tape on a print against the edge of the page
     never makes it scroll sideways. */
  --tape-edge: -18px;
  --tape-out: max(-50px, calc(12px - var(--pad)));
}

.snapshot-paper {
  display: block; position: relative;
  background: #FBF8F1;
  padding: 7px 7px 14px;
  -webkit-mask-image: var(--tear-booth); mask-image: var(--tear-booth);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

.snapshot img {
  display: block; width: 100%; border: 0; border-radius: 0;
  filter: sepia(0.26) saturate(0.76) contrast(1.16);
}

/* Age and handling. The blotches themselves are generated per print, so no
   two sheets carry the same marks. Inside the mask, so the dirt tears with
   the edge. */
.snapshot-paper::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: multiply;
}

#find .snapshot-paper::after {
  background: var(--stain-booth);
}

#jars .snapshot-sm .snapshot-paper::after {
  background: var(--stain-jars);
}

#sauces .snapshot-sm .snapshot-paper::after {
  background: var(--stain-sauces);
}

.story .snapshot-story .snapshot-paper::after {
  background: var(--stain-story);
}

/* Clear tape holding each print to the page. On .snapshot rather than
   .snapshot-paper: the paper is masked to its own torn outline, which would
   clip the half of the tape that overhangs it. Translucent, with a bright
   edge and a darker one so it reads as film. Decorative only.

   Where it goes follows the tear, which tools/make-assets.py sets per print.
   Tape never sits on a corner that has been ripped away (it would hang in
   the air) or on one where both edges are torn, and a torn edge gets none.

   Spot, count and angle are per print here. The cut end and the length come
   from tools/make-assets.py: one zigzag shared by every strip, because the
   dispenser's blade is the same blade every time, and a length per strip,
   because nobody pulls off the same amount twice. Unlike the prints, the
   ends are regular — tape is cut, not torn. */
.snapshot-sm {
  --tape-edge: -14px;
  --tape-out: max(-40px, calc(12px - var(--pad)));
}

/* Off by default, so a print added later with no rule of its own gets no
   tape rather than two unplaced strips across its corner. */
.snapshot::before, .snapshot::after {
  content: ""; display: none; position: absolute; z-index: 1;
  height: 48px; pointer-events: none; clip-path: var(--tape-end);
  background-image:
    linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.45) 44%,
      rgba(255,255,255,0.12) 50%, transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.16) 18%,
      rgba(255,255,255,0.16) 82%, rgba(60,50,35,0.16));
}

.snapshot-sm::before, .snapshot-sm::after { height: 38px; }

/* Booth: right and bottom torn, bottom-left ripped off. The top edge is
   clean, so one strip across the middle of it. */
#find .snapshot::before {
  display: block;
  width: var(--tape-booth-a-len);
  top: var(--tape-edge); transform: rotate(-2.5deg);
  left: calc(50% - var(--tape-booth-a-len) / 2);
}

/* Jars: top and right torn, top-right ripped off. Only the two bottom
   corners are clean enough to take tape. */
#jars .snapshot::before, #jars .snapshot::after { display: block; }
#jars .snapshot::before {
  width: var(--tape-jars-a-len);
  bottom: var(--tape-edge); left: var(--tape-out); transform: rotate(36deg);
}
#jars .snapshot::after {
  width: var(--tape-jars-b-len);
  bottom: -8px; right: var(--tape-out); transform: rotate(-44deg);
}

/* Sauces: right, bottom and left torn, bottom-right ripped off. The top is
   clean, so both top corners. */
#sauces .snapshot::before, #sauces .snapshot::after { display: block; }
#sauces .snapshot::before {
  width: var(--tape-sauces-a-len);
  top: -8px; left: var(--tape-out); transform: rotate(-31deg);
}
#sauces .snapshot::after {
  width: var(--tape-sauces-b-len);
  top: var(--tape-edge); right: calc(var(--tape-out) - 4px); transform: rotate(40deg);
}

/* Story: bottom and left torn, top-left ripped off. The right edge is
   clean, so the two right-hand corners. */
/* Light film over a near-black ground shows far more than it does on paper,
   so it is held back here to stay as faint as the others. */
.snapshot-story::before, .snapshot-story::after {
  display: block; opacity: 0.3;
}
.snapshot-story::before {
  width: var(--tape-story-a-len);
  top: var(--tape-edge); right: var(--tape-out); transform: rotate(35deg);
}
.snapshot-story::after {
  width: var(--tape-story-b-len);
  bottom: -4px; right: calc(var(--tape-out) + 4px); transform: rotate(-39deg);
}

/* In dark the whole page is the near-black ground the story print sits on
   in both themes, so every strip needs the same holding back, not just
   that one. */
:root[data-theme="dark"] .snapshot::before,
:root[data-theme="dark"] .snapshot::after { opacity: 0.3; }

@media (max-width: 800px) { .snapshot { transform: rotate(1.4deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}