/* ============================================================
   Backroad Touring — design tokens & system
   Brand system is locked (see CLAUDE.md). Only these colours,
   only these two typefaces, no border-radius, no drop shadows.

   The site is LIGHT FIRST. Dark is the alternate, reached with
   the lantern in the nav. Everything themeable is expressed as a
   semantic token below and swapped under [data-theme="dark"];
   nothing else in this file should hardcode a page colour.

   Two contexts stay fixed in BOTH themes, on purpose:
     .bg-ink  — dark band, bone text  (contrast punctuation)
     footer   — dark, bone text       (anchors the page)
   So anything scoped inside those may use the palette directly.
   ============================================================ */
:root{
  /* ---- brand palette: never changes ---- */
  --black:#141414;
  --ink:#211903;
  --bone:#DED4C7;
  --olive:#AD9F64;
  --gold:#FDD689;
  --ochre:#AD7F34;
  --orange:#F74B23;
  /* bone pulled 8% toward ink — card stock against paper. Used only
     to keep alternating bands readable in the light theme. */
  --bone-deep:#CFC5B7;

  --display:'Bebas Neue', 'Arial Narrow', sans-serif;
  --body:'Aleo', Georgia, serif;
  --max:1200px;

  /* ---- texture (disabled, Sep 2026) ---------------------------------
     Owner didn't like the paper texture on the coloured blocks — reverted
     to flat colour. Tokens kept, unused, so it's a one-line change per
     surface to bring back (add `background-image:var(--tex...)` where it
     was removed). Two layers, both inline SVG, no extra requests:
       tooth   — fine grain, the tooth of the paper stock
       mottle  — coarse cloudy blotching, so it doesn't read as
                 uniform digital static */
  --tooth-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23t)' opacity='0.035'/%3E%3C/svg%3E");
  --tooth-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23t)' opacity='0.05'/%3E%3C/svg%3E");
  --mottle-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23m)' opacity='0.022'/%3E%3C/svg%3E");
  --mottle-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23m)' opacity='0.028'/%3E%3C/svg%3E");
  --tex-dark:var(--tooth-dark),var(--mottle-dark);
  --tex-light:var(--tooth-light),var(--mottle-light);

  /* ---- semantic tokens: LIGHT (default) ---- */
  --bg:var(--bone);
  --band:var(--bone-deep);
  --surface:var(--bone-deep);
  --tex:var(--tex-light);
  --text:var(--ink);
  --text-soft:rgba(33,25,3,.76);
  --text-faint:rgba(33,25,3,.56);
  --rule:rgba(33,25,3,.20);
  --rule-soft:rgba(33,25,3,.12);
  --nav-bg:rgba(222,212,199,.92);
  --hero-glow:rgba(33,25,3,.10);
  --ticker-bg:rgba(33,25,3,.92);
  --field-bg:rgba(33,25,3,.04);
  --focus:var(--ochre);
  --grain-opacity:.022;
  /* Label/eyebrow text. Ochre on bone is only 2.45:1, so on light grounds
     this falls back to dark brown — still the warm register, but legible. */
  --accent-text:rgba(33,25,3,.78);

  /* ---- the pointer ----
     The BR mark itself (the exact path from #br-mark), not a
     reconstruction — same rule the hero lock-up follows. Filled +
     stroked in opposite tones so it reads against light or dark ground
     alike, and a vermilion fill over anything clickable (replacing the
     system pointer otherwise removes the only signal something's
     interactive). Hotspot is the centre.

     Defined as fixed light/dark pairs, independent of [data-theme] —
     the cursor tracks the LOCAL section's background, not the global
     theme toggle. --cursor/--cursor-active below are the page default
     (aliased to whichever colourway matches the current theme); .bg-ink,
     footer and .ticker stay dark regardless of theme, .bg-bone stays
     light regardless of theme, so they override back to a fixed
     colourway further down this file. */
  --cursor-light:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2217%22%20viewBox%3D%22-7%20-7%20204%20172%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M123.193%200C134.747%200%20144.688%201.53576%20153.018%204.60622C161.481%207.54314%20167.997%2012.081%20172.564%2018.2217C175.992%2022.6979%20178.168%2028.0969%20179.097%2034.4176H150.713C149.505%2031.4942%20147.655%2029.0323%20145.158%2027.0339C140.456%2023.1624%20133.135%2021.2268%20123.193%2021.2268H107.198V69.0857H122.79C132.463%2069.0857%20139.785%2066.8154%20144.756%2062.2764C147.171%2060.1283%20149.014%2057.6209%20150.287%2054.7552H177.81C177.261%2056.5868%20176.587%2058.3596%20175.788%2060.0734C173.236%2065.4132%20169.541%2070.0191%20164.705%2073.8905C160.003%2077.762%20154.984%2081.3082%20149.151%2083.103C146.796%2083.8275%20146%2084.4757%20143.618%2085.0539C146.917%2086.8071%20148.177%2089.4812%20150.549%2093.0777L174.774%20137.792C179.921%20138.87%20189.605%20142.107%20189.605%20142.107C189.605%20142.107%20189.605%20144.011%20189.605%20145.88V157.495L155.271%20157.495L124.277%2093.4826C123.068%2091.7473%20121.791%2090.5461%20120.447%2089.8786C119.104%2089.0778%20117.089%2088.6778%20114.402%2088.6778H107.053V137.294C112.075%20138.346%20121.808%20141.161%20121.808%20141.161C121.808%20141.161%20121.808%20143.498%20121.808%20145.367V157.495H56.271C44.7489%20157.495%2034.8333%20155.953%2026.5266%20152.872C18.0868%20149.924%2011.5888%20145.371%207.03368%20139.209C2.34439%20133.046%200%20125.141%200%20115.495C1.75748e-05%20108.797%201.27212%20103.215%203.81741%2097.7222C6.36297%2092.3634%2010.0483%2087.7412%2014.8714%2083.8561C17.8908%2081.3545%2021.6929%2078.9892%2025.5703%2077.1401C23.9528%2076.1066%2022.4281%2075.0135%2021.0642%2073.8905C16.228%2070.0191%2012.5334%2065.4132%209.98091%2060.0734C9.18173%2058.3596%208.50811%2056.5868%207.95921%2054.7552H35.4821C36.7548%2057.6209%2038.5978%2060.1283%2041.0137%2062.2764C45.9843%2066.8154%2053.3062%2069.0857%2062.9788%2069.0857H81.7199V21.2268H62.576C52.6347%2021.2268%2045.3128%2023.1624%2040.6109%2027.0339C38.1144%2029.0323%2036.2642%2031.4942%2035.0562%2034.4176H6.67239C7.60125%2028.0969%209.77753%2022.6979%2013.2049%2018.2217C17.7724%2012.081%2024.2884%207.54314%2032.7516%204.60622C41.0808%201.53576%2051.0226%200%2062.576%200H123.193ZM56.6723%2088.6778C47.0261%2088.6779%2039.7243%2090.9566%2034.7672%2095.5115C29.6765%20100.066%2027.1295%20106.228%2027.1293%20113.997C27.1293%20121.366%2029.5428%20126.993%2034.3659%20130.878C39.0551%20134.763%2046.3567%20136.706%2056.271%20136.706H81.7199V88.6778H56.6723Z%22%20fill%3D%22%23211903%22%20stroke%3D%22%23DED4C7%22%20stroke-width%3D%224%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 10 8;
  --cursor-light-active:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2217%22%20viewBox%3D%22-7%20-7%20204%20172%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M123.193%200C134.747%200%20144.688%201.53576%20153.018%204.60622C161.481%207.54314%20167.997%2012.081%20172.564%2018.2217C175.992%2022.6979%20178.168%2028.0969%20179.097%2034.4176H150.713C149.505%2031.4942%20147.655%2029.0323%20145.158%2027.0339C140.456%2023.1624%20133.135%2021.2268%20123.193%2021.2268H107.198V69.0857H122.79C132.463%2069.0857%20139.785%2066.8154%20144.756%2062.2764C147.171%2060.1283%20149.014%2057.6209%20150.287%2054.7552H177.81C177.261%2056.5868%20176.587%2058.3596%20175.788%2060.0734C173.236%2065.4132%20169.541%2070.0191%20164.705%2073.8905C160.003%2077.762%20154.984%2081.3082%20149.151%2083.103C146.796%2083.8275%20146%2084.4757%20143.618%2085.0539C146.917%2086.8071%20148.177%2089.4812%20150.549%2093.0777L174.774%20137.792C179.921%20138.87%20189.605%20142.107%20189.605%20142.107C189.605%20142.107%20189.605%20144.011%20189.605%20145.88V157.495L155.271%20157.495L124.277%2093.4826C123.068%2091.7473%20121.791%2090.5461%20120.447%2089.8786C119.104%2089.0778%20117.089%2088.6778%20114.402%2088.6778H107.053V137.294C112.075%20138.346%20121.808%20141.161%20121.808%20141.161C121.808%20141.161%20121.808%20143.498%20121.808%20145.367V157.495H56.271C44.7489%20157.495%2034.8333%20155.953%2026.5266%20152.872C18.0868%20149.924%2011.5888%20145.371%207.03368%20139.209C2.34439%20133.046%200%20125.141%200%20115.495C1.75748e-05%20108.797%201.27212%20103.215%203.81741%2097.7222C6.36297%2092.3634%2010.0483%2087.7412%2014.8714%2083.8561C17.8908%2081.3545%2021.6929%2078.9892%2025.5703%2077.1401C23.9528%2076.1066%2022.4281%2075.0135%2021.0642%2073.8905C16.228%2070.0191%2012.5334%2065.4132%209.98091%2060.0734C9.18173%2058.3596%208.50811%2056.5868%207.95921%2054.7552H35.4821C36.7548%2057.6209%2038.5978%2060.1283%2041.0137%2062.2764C45.9843%2066.8154%2053.3062%2069.0857%2062.9788%2069.0857H81.7199V21.2268H62.576C52.6347%2021.2268%2045.3128%2023.1624%2040.6109%2027.0339C38.1144%2029.0323%2036.2642%2031.4942%2035.0562%2034.4176H6.67239C7.60125%2028.0969%209.77753%2022.6979%2013.2049%2018.2217C17.7724%2012.081%2024.2884%207.54314%2032.7516%204.60622C41.0808%201.53576%2051.0226%200%2062.576%200H123.193ZM56.6723%2088.6778C47.0261%2088.6779%2039.7243%2090.9566%2034.7672%2095.5115C29.6765%20100.066%2027.1295%20106.228%2027.1293%20113.997C27.1293%20121.366%2029.5428%20126.993%2034.3659%20130.878C39.0551%20134.763%2046.3567%20136.706%2056.271%20136.706H81.7199V88.6778H56.6723Z%22%20fill%3D%22%23F74B23%22%20stroke%3D%22%23211903%22%20stroke-width%3D%224%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 10 8;
  --cursor-dark:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2217%22%20viewBox%3D%22-7%20-7%20204%20172%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M123.193%200C134.747%200%20144.688%201.53576%20153.018%204.60622C161.481%207.54314%20167.997%2012.081%20172.564%2018.2217C175.992%2022.6979%20178.168%2028.0969%20179.097%2034.4176H150.713C149.505%2031.4942%20147.655%2029.0323%20145.158%2027.0339C140.456%2023.1624%20133.135%2021.2268%20123.193%2021.2268H107.198V69.0857H122.79C132.463%2069.0857%20139.785%2066.8154%20144.756%2062.2764C147.171%2060.1283%20149.014%2057.6209%20150.287%2054.7552H177.81C177.261%2056.5868%20176.587%2058.3596%20175.788%2060.0734C173.236%2065.4132%20169.541%2070.0191%20164.705%2073.8905C160.003%2077.762%20154.984%2081.3082%20149.151%2083.103C146.796%2083.8275%20146%2084.4757%20143.618%2085.0539C146.917%2086.8071%20148.177%2089.4812%20150.549%2093.0777L174.774%20137.792C179.921%20138.87%20189.605%20142.107%20189.605%20142.107C189.605%20142.107%20189.605%20144.011%20189.605%20145.88V157.495L155.271%20157.495L124.277%2093.4826C123.068%2091.7473%20121.791%2090.5461%20120.447%2089.8786C119.104%2089.0778%20117.089%2088.6778%20114.402%2088.6778H107.053V137.294C112.075%20138.346%20121.808%20141.161%20121.808%20141.161C121.808%20141.161%20121.808%20143.498%20121.808%20145.367V157.495H56.271C44.7489%20157.495%2034.8333%20155.953%2026.5266%20152.872C18.0868%20149.924%2011.5888%20145.371%207.03368%20139.209C2.34439%20133.046%200%20125.141%200%20115.495C1.75748e-05%20108.797%201.27212%20103.215%203.81741%2097.7222C6.36297%2092.3634%2010.0483%2087.7412%2014.8714%2083.8561C17.8908%2081.3545%2021.6929%2078.9892%2025.5703%2077.1401C23.9528%2076.1066%2022.4281%2075.0135%2021.0642%2073.8905C16.228%2070.0191%2012.5334%2065.4132%209.98091%2060.0734C9.18173%2058.3596%208.50811%2056.5868%207.95921%2054.7552H35.4821C36.7548%2057.6209%2038.5978%2060.1283%2041.0137%2062.2764C45.9843%2066.8154%2053.3062%2069.0857%2062.9788%2069.0857H81.7199V21.2268H62.576C52.6347%2021.2268%2045.3128%2023.1624%2040.6109%2027.0339C38.1144%2029.0323%2036.2642%2031.4942%2035.0562%2034.4176H6.67239C7.60125%2028.0969%209.77753%2022.6979%2013.2049%2018.2217C17.7724%2012.081%2024.2884%207.54314%2032.7516%204.60622C41.0808%201.53576%2051.0226%200%2062.576%200H123.193ZM56.6723%2088.6778C47.0261%2088.6779%2039.7243%2090.9566%2034.7672%2095.5115C29.6765%20100.066%2027.1295%20106.228%2027.1293%20113.997C27.1293%20121.366%2029.5428%20126.993%2034.3659%20130.878C39.0551%20134.763%2046.3567%20136.706%2056.271%20136.706H81.7199V88.6778H56.6723Z%22%20fill%3D%22%23DED4C7%22%20stroke%3D%22%23211903%22%20stroke-width%3D%224%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 10 8;
  --cursor-dark-active:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2217%22%20viewBox%3D%22-7%20-7%20204%20172%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M123.193%200C134.747%200%20144.688%201.53576%20153.018%204.60622C161.481%207.54314%20167.997%2012.081%20172.564%2018.2217C175.992%2022.6979%20178.168%2028.0969%20179.097%2034.4176H150.713C149.505%2031.4942%20147.655%2029.0323%20145.158%2027.0339C140.456%2023.1624%20133.135%2021.2268%20123.193%2021.2268H107.198V69.0857H122.79C132.463%2069.0857%20139.785%2066.8154%20144.756%2062.2764C147.171%2060.1283%20149.014%2057.6209%20150.287%2054.7552H177.81C177.261%2056.5868%20176.587%2058.3596%20175.788%2060.0734C173.236%2065.4132%20169.541%2070.0191%20164.705%2073.8905C160.003%2077.762%20154.984%2081.3082%20149.151%2083.103C146.796%2083.8275%20146%2084.4757%20143.618%2085.0539C146.917%2086.8071%20148.177%2089.4812%20150.549%2093.0777L174.774%20137.792C179.921%20138.87%20189.605%20142.107%20189.605%20142.107C189.605%20142.107%20189.605%20144.011%20189.605%20145.88V157.495L155.271%20157.495L124.277%2093.4826C123.068%2091.7473%20121.791%2090.5461%20120.447%2089.8786C119.104%2089.0778%20117.089%2088.6778%20114.402%2088.6778H107.053V137.294C112.075%20138.346%20121.808%20141.161%20121.808%20141.161C121.808%20141.161%20121.808%20143.498%20121.808%20145.367V157.495H56.271C44.7489%20157.495%2034.8333%20155.953%2026.5266%20152.872C18.0868%20149.924%2011.5888%20145.371%207.03368%20139.209C2.34439%20133.046%200%20125.141%200%20115.495C1.75748e-05%20108.797%201.27212%20103.215%203.81741%2097.7222C6.36297%2092.3634%2010.0483%2087.7412%2014.8714%2083.8561C17.8908%2081.3545%2021.6929%2078.9892%2025.5703%2077.1401C23.9528%2076.1066%2022.4281%2075.0135%2021.0642%2073.8905C16.228%2070.0191%2012.5334%2065.4132%209.98091%2060.0734C9.18173%2058.3596%208.50811%2056.5868%207.95921%2054.7552H35.4821C36.7548%2057.6209%2038.5978%2060.1283%2041.0137%2062.2764C45.9843%2066.8154%2053.3062%2069.0857%2062.9788%2069.0857H81.7199V21.2268H62.576C52.6347%2021.2268%2045.3128%2023.1624%2040.6109%2027.0339C38.1144%2029.0323%2036.2642%2031.4942%2035.0562%2034.4176H6.67239C7.60125%2028.0969%209.77753%2022.6979%2013.2049%2018.2217C17.7724%2012.081%2024.2884%207.54314%2032.7516%204.60622C41.0808%201.53576%2051.0226%200%2062.576%200H123.193ZM56.6723%2088.6778C47.0261%2088.6779%2039.7243%2090.9566%2034.7672%2095.5115C29.6765%20100.066%2027.1295%20106.228%2027.1293%20113.997C27.1293%20121.366%2029.5428%20126.993%2034.3659%20130.878C39.0551%20134.763%2046.3567%20136.706%2056.271%20136.706H81.7199V88.6778H56.6723Z%22%20fill%3D%22%23F74B23%22%20stroke%3D%22%23DED4C7%22%20stroke-width%3D%224%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 10 8;
  --cursor:var(--cursor-light);
  --cursor-active:var(--cursor-light-active);

  /* ---- ash ----
     Pre-baked noise. Used as a mask so elements crumble rather than
     glow: paper doesn't flame, it chars and falls apart. */
  --ash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0.1 0.85 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23a)'/%3E%3C/svg%3E");
}

[data-theme="dark"]{
  --bg:var(--black);
  --band:var(--bone);
  --surface:var(--ink);
  --tex:var(--tex-dark);
  --text:var(--bone);
  --text-soft:rgba(222,212,199,.78);
  --text-faint:rgba(222,212,199,.55);
  --rule:rgba(222,212,199,.18);
  --rule-soft:rgba(222,212,199,.10);
  --nav-bg:rgba(20,20,20,.92);
  --hero-glow:rgba(33,25,3,.9);
  --ticker-bg:rgba(33,25,3,.55);
  --field-bg:rgba(222,212,199,.05);
  --focus:var(--gold);
  --grain-opacity:.03;
  --accent-text:var(--olive);
  --cursor:var(--cursor-dark);
  --cursor-active:var(--cursor-dark-active);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background-color:var(--bg);
  color:var(--text);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* film grain over everything, like the brand board. Sits above the
   per-surface texture and ties the whole page into one print. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,.disp{font-family:var(--display);font-weight:400;letter-spacing:.03em;line-height:.95;text-transform:uppercase}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--orange);color:var(--bone);
  font-family:var(--display);letter-spacing:.1em;padding:.6em 1.2em .45em;
}
.skip:focus{left:8px;top:8px}
.eyebrow{
  font-family:var(--body);font-weight:600;font-size:.8rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent-text);display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--orange)}

.btn{
  display:inline-block;font-family:var(--display);font-size:1.15rem;letter-spacing:.09em;
  padding:.7em 1.9em .55em;text-decoration:none;border:2px solid var(--text);
  color:var(--text);background:transparent;transition:all .18s ease;text-transform:uppercase;
}
.btn:hover{background:var(--text);color:var(--bg)}
.btn.solid{background:var(--orange);border-color:var(--orange);color:var(--bone)}
.btn.solid:hover{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.btn.dark{border-color:var(--ink);color:var(--ink)}
.btn.dark:hover{background:var(--ink);color:var(--bone)}
.btn[disabled]{opacity:.55;pointer-events:none}
/* .bg-ink is dark in both themes, so buttons inside it are always bone */
.bg-ink .btn{border-color:var(--bone);color:var(--bone)}
.bg-ink .btn:hover{background:var(--bone);color:var(--ink)}
.bg-ink .btn.solid{background:var(--orange);border-color:var(--orange);color:var(--bone)}
.bg-ink .btn.solid:hover{background:var(--bone);border-color:var(--bone);color:var(--ink)}

/* highway centreline divider — the signature */
.centreline{height:44px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.centreline span{
  width:100%;height:5px;opacity:.6;
  background:repeating-linear-gradient(90deg,var(--ochre) 0 46px,transparent 46px 92px);
}

/* ============ NAV ============ */
header{
  position:sticky;top:0;z-index:100;background:var(--nav-bg);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);
}
/* Full-width, deliberately NOT capped at --max like .wrap. The nav bar
   is meant to span the header edge to edge — logo hard left, menu hard
   right — rather than sit centred in the same 1200px column as page
   content. On very wide screens the header therefore reaches further
   out than the hero/content below it; that's the point, not a bug. */
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;padding:0 24px}
.nav-logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text)}
/* Horizontal (side-by-side) lock-up, not the stacked one the hero uses —
   mark and wordmark share ONE height here, full stop. The 1.495 ratio
   in CLAUDE.md is for the stacked arrangement (icon dominant, wordmark
   below it) and doesn't apply to an inline pairing like this one.
   display:block matters: an inline svg sits on the text baseline and
   picks up line-height slack from its container, which put the two
   glyphs visibly out of line even at equal heights when one used to
   be wrapped in an unstyled <span>. Both are now bare, direct flex
   children of .nav-logo with no such wrapper to cause that again. */
.nav-logo svg{height:38px;width:auto;display:block}
.nav-links{display:flex;gap:6px;list-style:none;align-items:center}
.nav-links a{
  font-family:var(--display);font-size:1.05rem;letter-spacing:.1em;text-decoration:none;
  padding:.55em .85em .4em;color:var(--text);opacity:.72;transition:all .15s;border-bottom:2px solid transparent;
}
.nav-links a:hover{opacity:1}
.nav-links a.active{opacity:1;border-bottom-color:var(--orange)}
.nav-links a.cta{border:2px solid var(--orange);color:var(--text);opacity:1;margin-left:10px}
.nav-links a.cta:hover{background:var(--orange);color:var(--bone)}
.nav-links a.cta.active{border-bottom-color:var(--orange);background:var(--orange);color:var(--bone)}
.burger{display:none;background:none;border:none;color:var(--text);font-family:var(--display);font-size:1.1rem;letter-spacing:.1em}
.nav-right{display:flex;align-items:center;gap:14px}

/* ---- the lantern: light/dark switch ----
   Back in the header (third placement) now that .nav spans the full
   width instead of being capped at --max — the earlier attempt here
   was dropped for looking cramped, which tracks: the whole nav was
   squeezed into a centred 1200px column at the time. Sits in
   .nav-right after nav-links, so it's the last thing before the far
   right edge, next to Partner With Us. No border/frame — a bare icon,
   like the burger beside it. */
.lamp{
  background:none;border:none;
  padding:8px 10px;line-height:0;color:var(--text);
}
.lamp svg{width:26px;height:auto;overflow:visible;display:block}
.lamp .lamp-body{fill:none;stroke:currentColor;stroke-width:7;stroke-linejoin:round;stroke-linecap:round}
/* Lit on the light theme: you strike the match, the room brightens.
   Order matters below — the dark rules must outrank the light-hover
   gutter, and the dark-hover catch must outrank both. */
.lamp .lamp-glass{fill:var(--gold);opacity:.22;transition:fill .25s ease,opacity .25s ease}
.lamp .lamp-flame{fill:var(--gold);opacity:1;transform-origin:50% 70%;transition:opacity .25s ease;
  animation:flicker 2.6s ease-in-out infinite}
.lamp .lamp-halo{color:var(--gold);opacity:1;transition:opacity .3s ease}

/* hovering a lit lamp: it gutters, as if you're about to blow it out */
.lamp:hover .lamp-flame,.lamp:focus-visible .lamp-flame{opacity:.5}
.lamp:hover .lamp-halo,.lamp:focus-visible .lamp-halo{opacity:.45}

/* dark theme: the lamp is out */
[data-theme="dark"] .lamp .lamp-glass{fill:var(--text);opacity:.07}
[data-theme="dark"] .lamp .lamp-flame{opacity:0;animation:none}
[data-theme="dark"] .lamp .lamp-halo{opacity:0}

/* match at the wick — it catches, but nothing commits until the click */
[data-theme="dark"] .lamp:hover .lamp-glass,
[data-theme="dark"] .lamp:focus-visible .lamp-glass{fill:var(--gold);opacity:.15}
[data-theme="dark"] .lamp:hover .lamp-flame,
[data-theme="dark"] .lamp:focus-visible .lamp-flame{opacity:.62;animation:catch .45s ease-out}
[data-theme="dark"] .lamp:hover .lamp-halo,
[data-theme="dark"] .lamp:focus-visible .lamp-halo{opacity:.5}

@keyframes flicker{
  0%,100%{opacity:1;transform:scaleY(1)}
  42%{opacity:.82;transform:scaleY(.93)}
  67%{opacity:1;transform:scaleY(1.04)}
}
@keyframes catch{
  0%{opacity:0;transform:scaleY(.2)}
  55%{opacity:.85;transform:scaleY(1.15)}
  100%{opacity:.62;transform:scaleY(1)}
}

@media(max-width:880px){
  .burger{display:block}
  /* Matching heights makes the wordmark ~190px wide (vs ~85px before) —
     comfortable at 880px, but only ~11px spare next to the burger at a
     375px phone and overflowing below ~340px. Scale the whole lock-up
     down for the width range where that actually gets tight. */
  .nav-logo svg{height:30px}
  .nav-links{
    display:none;position:absolute;top:74px;left:0;right:0;
    background-color:var(--bg);
    flex-direction:column;align-items:stretch;padding:12px 24px 24px;gap:2px;
    border-bottom:1px solid var(--rule);
  }
  .nav-links.open{display:flex}
  .nav-links a{font-size:1.4rem;padding:.5em 0 .35em}
  .nav-links a.cta{margin-left:0;text-align:center;margin-top:10px}
}

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

/* ============ HOME HERO ============ */
.hero{
  min-height:calc(100vh - 74px);display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;text-align:center;padding:70px 24px 120px;
  background:
    radial-gradient(ellipse 90% 65% at 50% 110%, var(--hero-glow), transparent 65%),
    var(--bg);
}
/* The mark and BACKROAD wordmark are the real artwork (#br-mark,
   #br-type), not a reconstruction — Bebas Neue only approximates the
   drawn logotype. TOURING used to be part of the same frozen artwork
   too (#br-lockup, now unused), but it has to be live text: it cycles
   through the arms of the business (site.js), and a static vector
   can't. Both inherit `color`, so they flip with the theme; the <h1>
   is screen-reader-only and names all four words for anyone who can't
   see the animation.

   .hero-lockup is sized once (the logotype's own width) and everything
   else is a PERCENTAGE of it, using the exact ratios measured off the
   source artwork (see CLAUDE.md): mark is 35.7% of that width, mark
   height is 1.495x logotype height, mark→logotype gap is 12.2% and
   logotype→TOURING gap is 7.5%. margin-top/bottom percentages resolve
   against the CONTAINING BLOCK'S WIDTH in CSS (not height) — which is
   exactly what's needed here, since every one of these ratios was
   measured as a fraction of the logotype's width in the first place. */
.hero-lockup{width:min(380px,61vw);margin:0 auto 24px;color:var(--text)}
.hero-mark{display:block;width:35.7%;height:auto;margin:0 auto 12.2%}
.hero-type{display:block;width:100%;height:auto}
.hero-rule-sub{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-top:7.5%;
}
/* Matches the logo's own colour (--text: bone on dark, ink on light) rather
   than the gold/ochre used elsewhere for the .page-hero rule-sub — this one
   sits directly under the mark and wordmark, so it reads as part of the
   logo lockup rather than an accent. */
.hero-rule-sub::before,.hero-rule-sub::after{content:"";flex:1;height:1px;background:var(--text)}
.hero-word{
  font-family:var(--display);font-size:clamp(1.1rem,3vw,1.6rem);letter-spacing:.55em;
  color:var(--text);padding-left:.55em;white-space:nowrap;display:inline-flex;align-items:baseline;
}
/* A flex item with truly no text content (word fully deleted, between
   words) has zero height — no line box gets generated at all, block or
   not — which briefly shrinks this row and everything below the logo
   lockup, which sizes to it. A zero-width space is a real character, so it
   forces the same line box (and height) an actual word would, without
   adding any visible width. */
.hero-word-text:empty::after{content:"\200b"}
/* Blinks while idle (paused between words); held solid while a
   character is actively being typed or deleted, like a real cursor. */
.hero-cursor{
  display:inline-block;width:2px;height:.85em;margin-left:.14em;background:currentColor;
  animation:hero-cursor-blink 1s step-end infinite;
}
.hero-word.is-active .hero-cursor{opacity:1;animation:none}
@keyframes hero-cursor-blink{0%,100%{opacity:1}50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .hero-cursor{display:none}
}
.hero p.lede{max-width:560px;margin:0 auto 38px;font-size:clamp(1.25rem,2.6vw,1.6rem);color:var(--text-soft)}
.hero p.lede em{color:var(--orange);font-style:italic}
[data-theme="dark"] .hero p.lede em{color:var(--gold)}
/* Grid, not flex-wrap — flex-wrap breaks lines by available width, which
   with four buttons of different label lengths can land 3-then-1. Grid
   forces a clean 4-across / 2x2 / stacked instead, at fixed breakpoints. */
.hero .actions{display:grid;grid-template-columns:repeat(4,auto);gap:16px;justify-content:center;margin-top:26px}
@media(max-width:720px){.hero .actions{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.hero .actions{grid-template-columns:1fr;justify-items:center}}

/* town ticker — dark strip in both themes, it anchors the hero */
.ticker{
  position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--rule);
  background:var(--ticker-bg);
  overflow:hidden;white-space:nowrap;padding:13px 0 10px;
}
.ticker .track{display:inline-block;animation:roll 46s linear infinite}
.ticker span{
  font-family:var(--display);font-size:1.05rem;letter-spacing:.22em;color:var(--olive);padding:0 .5em;
}
.ticker span::after{content:"★";color:var(--orange);padding-left:1em;font-size:.8em}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
section.block{padding:96px 0}
section.block.tight{padding:72px 0}
/* alternating band. Ink text in both themes — anything scoped inside
   may therefore use the ink palette directly. */
.bg-bone{background-color:var(--band);color:var(--ink)}
/* contrast band. Dark in both themes. */
.bg-ink{background-color:var(--ink);color:var(--bone)}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:48px}
.sec-head h2{font-size:clamp(2.6rem,6vw,4.4rem)}
.sec-head.centred{text-align:center;align-items:center}
.sec-head.centred .eyebrow{justify-content:center}
.bg-bone .eyebrow{color:rgba(33,25,3,.78)}
.bg-ink .eyebrow{color:var(--olive)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:40px}}

/* coming up strip (home) — always inside .bg-bone */
.strip{display:flex;flex-direction:column}
.strip a.show{
  display:grid;grid-template-columns:110px 1fr auto;gap:26px;align-items:center;
  padding:26px 8px;border-top:1px solid rgba(33,25,3,.22);text-decoration:none;color:var(--ink);
  transition:background .15s;
}
.strip a.show:last-child{border-bottom:1px solid rgba(33,25,3,.22)}
.strip a.show:hover{background:rgba(33,25,3,.05)}
.strip .date{font-family:var(--display);font-size:1.5rem;line-height:1;color:rgba(33,25,3,.78)}
.strip .date b{display:block;font-size:2.6rem;color:var(--ink);font-weight:400}
.strip .who h3{font-size:1.9rem;letter-spacing:.04em}
.strip .who p{font-size:.95rem;color:rgba(33,25,3,.7)}
.strip .go{font-family:var(--display);font-size:1.1rem;letter-spacing:.1em;color:var(--orange)}
@media(max-width:640px){.strip a.show{grid-template-columns:84px 1fr}.strip .go{display:none}}
.strip-holding{padding:26px 8px;color:rgba(33,25,3,.75);max-width:560px}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--rule)}
.pillars article{background-color:var(--surface);padding:46px 34px}
.pillars h3{font-size:2rem;color:var(--text);margin-bottom:12px}
.pillars p{color:var(--text-soft);font-size:.98rem;margin-bottom:20px}
.pillars a{font-family:var(--display);letter-spacing:.1em;color:var(--orange);text-decoration:none;font-size:1.05rem}
.pillars a:hover{color:var(--text)}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}

/* partner strip — lives in .bg-ink, so bone throughout */
.partner-cta{text-align:center;max-width:680px;margin:0 auto}
.partner-cta h2{font-size:clamp(2.6rem,6vw,4.2rem);margin-bottom:18px}
.partner-cta p{margin-bottom:34px;color:rgba(222,212,199,.85)}
.logo-slots{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:44px 0 0;align-items:center}
.logo-slots .slot{
  border:1px dashed rgba(222,212,199,.35);padding:20px 34px;font-family:var(--display);
  letter-spacing:.14em;color:rgba(222,212,199,.45);font-size:1rem;
}
.logo-slots .partner-logo{padding:0;border:0}
.logo-slots .partner-logo img{max-height:52px;width:auto}

/* newsletter — always inside .bg-bone */
.newsletter{max-width:620px;margin:0 auto;text-align:center}
.newsletter h2{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:12px}
.newsletter p{color:rgba(33,25,3,.75);margin-bottom:28px}
.newsletter form{display:flex;gap:0;max-width:460px;margin:0 auto}
.newsletter input{
  flex:1;font:inherit;padding:14px 18px;border:2px solid var(--ink);background:transparent;color:var(--ink);min-width:0;
}
.newsletter input::placeholder{color:rgba(33,25,3,.5)}
.newsletter button{
  font-family:var(--display);font-size:1.1rem;letter-spacing:.1em;padding:0 28px;
  background:var(--ink);color:var(--bone);border:2px solid var(--ink);
}
.newsletter button:hover{background:var(--orange);border-color:var(--orange);color:var(--bone)}
.newsletter .ok{display:none;color:rgba(33,25,3,.82);font-weight:600;margin-top:14px}
.newsletter .err{display:none;color:var(--orange);font-weight:600;margin-top:14px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* honeypot — off-screen, never focusable */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============ EVENTS ============ */
.page-hero{padding:84px 0 56px;text-align:center}
.page-hero h1{font-size:clamp(3.4rem,9vw,7rem)}
.page-hero .rule-sub{display:flex;align-items:center;justify-content:center;gap:18px;margin:14px auto 0;max-width:640px;width:100%}
.page-hero .rule-sub::before,.page-hero .rule-sub::after{content:"";flex:1;height:1px;background:var(--ochre)}
/* font-size is fluid (not fixed) so a longer line — this one runs to six
   words — shrinks to fit rather than wrapping to a second line; nowrap
   backs that up rather than relying on it alone. */
.page-hero .rule-sub span{font-family:var(--display);letter-spacing:.4em;color:var(--accent-text);font-size:clamp(.6rem,2.4vw,1.05rem);padding-left:.4em;white-space:nowrap}
.presented{
  max-width:760px;margin:0 auto 60px;border:1px solid var(--rule);
  padding:22px 30px;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;text-align:center;
}
.presented .tag{font-family:var(--body);font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-text)}
.presented .name{font-family:var(--display);font-size:1.7rem;color:var(--text);letter-spacing:.08em}
[data-theme="dark"] .presented .name{color:var(--gold)}
.filters{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:46px}
.filters button{
  font-family:var(--display);font-size:1.05rem;letter-spacing:.1em;padding:.5em 1.2em .35em;
  background:none;border:2px solid var(--rule);color:var(--text);transition:all .15s;
}
.filters button:hover{border-color:var(--ochre);color:var(--text)}
.filters button[aria-pressed="true"]{background:var(--ochre);border-color:var(--ochre);color:var(--ink)}
[data-theme="dark"] .filters button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px;padding-bottom:96px}
.card{
  background-color:var(--surface);border:1px solid var(--rule);
  display:flex;flex-direction:column;transition:transform .18s ease, border-color .18s;
}
.card:hover{transform:translateY(-5px);border-color:var(--ochre)}
.card[hidden]{display:none}
.poster{position:relative;aspect-ratio:4/5;overflow:hidden}
.poster img{width:100%;height:100%;object-fit:cover}
.poster .badge{
  position:absolute;top:14px;left:14px;font-family:var(--display);font-size:.95rem;letter-spacing:.12em;
  padding:.4em .9em .25em;background:var(--gold);color:var(--ink);z-index:1;
}
.badge.soldout{background:var(--orange);color:var(--bone)}
.badge.free{background:var(--olive);color:var(--ink)}
.badge.fast{background:var(--gold);color:var(--ink)}
.badge.past{background:var(--rule);color:var(--text)}
/* typographic fallback poster — its own fixed colourways */
.tposter{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:26px;text-align:center}
.tposter .pm{width:52px;margin:0 auto}
.tposter .pt{font-family:var(--display);font-size:2.5rem;line-height:.92;letter-spacing:.04em}
.tposter .ps{font-family:var(--body);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;opacity:.8}
.card .meta{padding:22px 22px 26px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .meta .d{font-family:var(--display);font-size:1.05rem;letter-spacing:.14em;color:var(--accent-text)}
.card .meta h3{font-size:1.75rem;letter-spacing:.04em;color:var(--text)}
.card .meta .v{font-size:.92rem;color:var(--text-soft)}
.card .meta .tix{margin-top:auto;padding-top:18px}
.card .meta .tix a,.card .meta .tix span{
  display:inline-block;font-family:var(--display);font-size:1.05rem;letter-spacing:.12em;text-decoration:none;
  border:2px solid var(--orange);color:var(--text);padding:.5em 1.4em .35em;transition:all .15s;
}
.card .meta .tix a:hover{background:var(--orange);color:var(--bone)}
.card .meta .tix .dis{border-color:var(--rule);color:var(--text-faint)}
.card .meta .tix .dis.freeish{border-color:var(--olive);color:var(--olive)}
.empty{
  grid-column:1/-1;border:2px dashed var(--rule);padding:60px 30px;text-align:center;
  color:var(--text-faint);font-family:var(--display);font-size:1.4rem;letter-spacing:.1em;
}

/* pre-launch state — shown when there are no events yet */
.holding{
  border:1px solid var(--rule);padding:80px 34px 86px;margin-bottom:96px;
  text-align:center;max-width:720px;margin-left:auto;margin-right:auto;
}
.holding .mark{width:78px;margin:0 auto 30px;color:var(--text)}
.holding h2{font-size:clamp(2.2rem,5vw,3.4rem);color:var(--text);margin-bottom:20px}
.holding p{color:var(--text-soft);margin:0 auto 16px;max-width:460px}
.holding p.small{font-size:.92rem;color:var(--text-faint);margin-bottom:30px}

/* ============ ABOUT ============ */
.about-lede{font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.5;max-width:820px}
.about-lede em{color:var(--orange)}
.stats{display:grid;grid-template-columns:repeat(var(--stat-cols,4),1fr);gap:2px;background:rgba(33,25,3,.2);margin-top:70px}
.stats div{background-color:var(--bone);padding:36px 26px;text-align:center}
.stats b{display:block;font-family:var(--display);font-size:3.4rem;line-height:1;color:var(--orange);font-weight:400}
.stats span{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(33,25,3,.7);font-weight:600}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.creed{max-width:760px;margin:0 auto;text-align:center}
.creed h2{font-size:clamp(2.6rem,6vw,4.4rem);color:var(--text);margin-bottom:26px}
.creed p{color:var(--text-soft);margin-bottom:18px}
.creed .mark{width:74px;margin:38px auto 0;color:var(--text)}

/* ============ PARTNERSHIPS ============ */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(33,25,3,.2);margin-bottom:80px}
.tiers article{background-color:var(--bone);padding:42px 34px;display:flex;flex-direction:column}
.tiers .tno{font-family:var(--display);font-size:1rem;letter-spacing:.2em;color:rgba(33,25,3,.78);margin-bottom:14px}
.tiers h3{font-size:2rem;margin-bottom:14px}
.tiers p{font-size:.95rem;color:rgba(33,25,3,.75);margin-bottom:14px}
.tiers ul{list-style:none;margin-top:auto}
.tiers li{font-size:.9rem;padding:9px 0;border-top:1px solid rgba(33,25,3,.18);color:rgba(33,25,3,.85)}
.tiers li::before{content:"★ ";color:var(--orange);font-size:.75em}
@media(max-width:880px){.tiers{grid-template-columns:1fr}}
.pform{max-width:720px;margin:0 auto}
.pform label{display:block;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-text);margin:22px 0 8px;font-weight:600}
.pform input,.pform select,.pform textarea{
  width:100%;font:inherit;font-size:1rem;padding:14px 16px;background:var(--field-bg);
  border:1px solid var(--rule);color:var(--text);
}
.pform input:focus,.pform select:focus,.pform textarea:focus{outline:2px solid var(--focus);outline-offset:1px}
.pform textarea{min-height:150px;resize:vertical}
.pform .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.pform .row{grid-template-columns:1fr}}

/* ============ OPPORTUNITIES & DEVELOPMENT ============ */
.opp-grid article,.dev-grid article{margin-bottom:0}
.tag-cat{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text);margin-bottom:14px}
.attrib{font-size:.85rem;letter-spacing:.04em;color:var(--text-soft);margin-bottom:10px}
.attrib.centred{text-align:center;max-width:none}
.opp-list{max-width:760px;margin:0 auto;list-style:none}
.opp-list li{padding:16px 0;border-top:1px solid var(--rule);color:var(--text-soft);font-size:.98rem}
.opp-list li:last-child{border-bottom:1px solid var(--rule)}
.opp-list li b{color:var(--text);font-family:var(--display);letter-spacing:.06em;font-weight:400}
.video-embed{position:relative;max-width:820px;margin:0 auto;aspect-ratio:16/9;background:var(--surface)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pform .submit{margin-top:34px}
.pform .ok,.pform .err{display:none;border:1px solid var(--olive);padding:26px;margin-top:30px;text-align:center}
.pform .err{border-color:var(--orange)}
.pform .ok b,.pform .err b{
  font-family:var(--display);font-size:1.6rem;letter-spacing:.06em;color:var(--text);
  display:block;margin-bottom:6px;font-weight:400;
}
.pform .err b{color:var(--orange)}

/* ============ 404 ============ */
.lost{text-align:center;max-width:640px;margin:0 auto;padding:120px 24px}
.lost h1{font-size:clamp(3.4rem,9vw,6rem);color:var(--text);margin-bottom:18px}
.lost p{color:var(--text-soft);margin-bottom:34px}
.lost .mark{color:var(--text)}

/* ============ FOOTER — dark in both themes ============ */
footer{background-color:var(--ink);border-top:2px solid var(--ochre);padding:70px 0 40px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px;max-width:var(--max);margin:0 auto;padding:0 24px}
.foot .fmark svg{width:64px;color:var(--bone);margin-bottom:18px}
.foot p{font-size:.92rem;color:rgba(222,212,199,.65);max-width:300px}
.foot h4{font-family:var(--display);font-size:1.1rem;letter-spacing:.16em;color:var(--olive);margin-bottom:16px;font-weight:400}
.foot ul{list-style:none}
.foot li{padding:5px 0}
.foot a{color:rgba(222,212,199,.8);text-decoration:none;font-size:.95rem}
.foot a:hover{color:var(--bone)}
.foot-bar{
  max-width:var(--max);margin:56px auto 0;padding:24px 24px 0;border-top:1px solid rgba(222,212,199,.14);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.8rem;letter-spacing:.08em;color:rgba(222,212,199,.5);
}
@media(max-width:820px){.foot{grid-template-columns:1fr;gap:36px}}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ============================================================
   ASH
   The pointer is the brand mark, and prose links char along their
   underline on hover (edges eaten away through a noise mask). Buttons
   used to do this too — a rising ember, then a crumbling mask — and
   both were tried and removed (Aug/Sep 2026). Buttons are now just
   buttons: plain fill-invert hover, no animation.
   ============================================================ */

/* Mask stops need to be animatable, which means registering them.
   Still used by the text-link scorch below. */
@property --ash-core{syntax:"<percentage>";inherits:false;initial-value:170%}
@property --ash-edge{syntax:"<percentage>";inherits:false;initial-value:176%}

/* The pointer is the brand mark. Fine pointers only — a coarse
   pointer can't aim a hotspot and touch devices have no cursor. */
@media (hover:hover) and (pointer:fine){
  html{cursor:var(--cursor),auto}
  a,button,summary,label,[role="button"],.card,.strip a.show,
  select,input[type="checkbox"],input[type="radio"],input[type="file"]{
    cursor:var(--cursor-active),pointer;
  }
  input[type="text"],input[type="email"],input[type="tel"],input[type="url"],textarea{
    cursor:var(--cursor-active),text;
  }

  /* .bg-ink, footer and .ticker stay a dark band regardless of the
     global theme (see the tokens comment above), so the cursor over
     them is pinned dark rather than following [data-theme]. Higher
     specificity than the bare `a, button…` rule above wins these on
     their own, in either direction of the cascade. */
  .bg-ink,footer,.ticker{cursor:var(--cursor-dark),auto}
  .bg-ink a,.bg-ink button,.bg-ink [role="button"],
  footer a,footer button,
  .ticker a,.ticker button{
    cursor:var(--cursor-dark-active),pointer;
  }

  /* .bg-bone (and the .stats/.tiers panels nested inside it) stay a
     light band regardless of theme, so pin the cursor light there too. */
  .bg-bone{cursor:var(--cursor-light),auto}
  .bg-bone a,.bg-bone button,.bg-bone [role="button"],.bg-bone .card,
  .bg-bone .strip a.show{
    cursor:var(--cursor-light-active),pointer;
  }
}

/* buttons: plain hover, no animation. Flame/ash effects were tried and
   removed twice (Aug/Sep 2026) — owner wants buttons to just be buttons. */

/* ---- links char along the underline ----
   The rule doesn't sweep or glow; it disintegrates, and the text
   frays very slightly at its edges. */
.foot a,.pillars a,.holding a:not(.btn),.creed a,.tiers a{
  text-decoration:none;
  --ash-core:170%;--ash-edge:176%;
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
  -webkit-mask-image:var(--ash),radial-gradient(100% 100% at 50% 50%,#000 var(--ash-core),transparent var(--ash-edge));
  mask-image:var(--ash),radial-gradient(100% 100% at 50% 50%,#000 var(--ash-core),transparent var(--ash-edge));
  -webkit-mask-size:60px 60px,100% 100%;
  mask-size:60px 60px,100% 100%;
  -webkit-mask-composite:source-over;
  mask-composite:add;
  transition:--ash-core .5s ease,--ash-edge .5s ease,border-color .3s ease;
}
.foot a:hover,.foot a:focus-visible,
.pillars a:hover,.pillars a:focus-visible,
.holding a:not(.btn):hover,.creed a:hover,.tiers a:hover{
  --ash-core:34%;
  --ash-edge:86%;
  border-bottom-color:transparent;
}

/* ---- nothing crumbles if motion isn't wanted ---- */
@media (prefers-reduced-motion:reduce){
  .foot a,.pillars a,.holding a:not(.btn),.creed a,.tiers a{
    -webkit-mask-image:none;mask-image:none;transition:none;
  }
}

/* ============================================================
   THE BRANDING IRON
   Press and hold anywhere: the mark starts as a faint scatter of ash
   and solidifies into a solid stamp the longer you hold — pressing an
   iron down, not tapping it. Release and it holds briefly at whatever
   it reached, then fades. Purely decorative and driven entirely by
   site.js (per-frame inline styles, not CSS keyframes — hold duration
   is analog input, a fixed-length animation can't represent it).
   Nothing here calls preventDefault, so the click's real effect
   (navigate, submit, toggle) always happens on its own schedule.

   On light local ground it darkens as it solidifies — a hot iron
   charring light hide. On dark local ground (site.js's isDarkGround,
   the same rule the cursor CSS uses) it lightens instead and holds
   pale — a cold/freeze brand, used on dark hide specifically because
   a dark burn wouldn't show there. Colour is a genuine gradient
   through the brand palette (JS uses color-mix(), not a fixed stop)
   so it burns in continuously rather than snapping between stages.
   --ash-core/--ash-edge below are just the REST values JS animates
   from, not the look itself. */
.sear{
  position:fixed;left:0;top:0;width:32px;pointer-events:none;z-index:300;
  transform:translate(-50%,-50%);
}
.sear .glow{
  position:absolute;inset:-60%;
  background:radial-gradient(circle,var(--gold) 0%,rgba(253,214,137,0) 70%);
  opacity:0;animation:sear-glow 1.3s ease-out forwards;
}
/* The mark is masked with the ash noise so it reads as charred paper,
   not a clean vector — the texture is the point. mask-size is small
   relative to the icon so a handful of noise cells cross it. The
   second mask layer (the radial gradient using --ash-core/--ash-edge)
   is what JS grows from "barely there" to "fully solid" as you hold;
   these two values are only the untouched starting point. */
.sear svg{
  position:relative;display:block;width:100%;height:auto;
  color:var(--gold);opacity:0;
  --ash-core:4%;--ash-edge:40%;
  -webkit-mask-image:var(--ash),radial-gradient(100% 100% at 50% 50%,#000 var(--ash-core),transparent var(--ash-edge));
  mask-image:var(--ash),radial-gradient(100% 100% at 50% 50%,#000 var(--ash-core),transparent var(--ash-edge));
  -webkit-mask-size:13px 13px,100% 100%;mask-size:13px 13px,100% 100%;
  -webkit-mask-composite:source-over;mask-composite:add;
}
@keyframes sear-glow{
  0%{opacity:0}
  10%{opacity:.6}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .sear{display:none}
}