/* Adam Dobrer — site styles
   Layout: a typed page with a wide right margin; handwriting annotates the page from that margin. */

/* Fonts are hosted on this site. 'Dobby Hand' is Adam's own handwriting, built from his
   capture sheet, accents included. Nanum Pen Script stays as a backup for rare characters the
   font doesn't cover; the browser only downloads it if one of those appears. */
@font-face { font-family: 'Dobby Hand'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/DobbyHand-Light.woff2') format('woff2'); }
@font-face { font-family: 'Dobby Hand'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/DobbyHand-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Dobby Hand'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/DobbyHand-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Hand Backup'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/NanumPenScript-normal.woff2') format('woff2');
  unicode-range: U+00C0-024F, U+2026, U+00D7, U+2022, U+20AC, U+00A3, U+00B0; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/SchibstedGrotesk-normal.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/SchibstedGrotesk-italic.woff2') format('woff2'); }

:root {
  --paper: #e8ece6;
  --ink: #17212b;
  --pencil: #5a6570;
  --pen: #2340c4;
  --marker: #f3e54a;     /* highlighter */
  --marker-ink: #17212b; /* text on the highlighter */
  --wash: #efe9a6;       /* signup box */
  --rule: #c9d0c7;
  --land: #d8ded5;
  --land-edge: #b7c0b4;
  --margin-line: #b9c3dc; /* faint pen line between text and margin */
  --squiggle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-1%20-1%20126%2031%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%232340c4%22%20d%3D%22M9.25%2028.62%20C9.08%2028.42%208.67%2028.25%208.35%2028.25%20C7.30%2028.25%205.05%2026.97%204.73%2026.20%20C4.57%2025.81%203.84%2024.88%203.11%2024.14%20C2.38%2023.41%201.39%2022.23%200.89%2021.53%20L0.00%2020.26%20L0.00%2013.41%20C0.00%207.63%200.06%206.51%200.38%206.25%20C0.58%206.08%200.75%205.67%200.75%205.34%20C0.75%205.01%201.20%203.84%201.75%202.75%20C2.30%201.66%202.75%200.59%202.75%200.38%20C2.75%200.08%203.10%200.00%204.50%200.00%20C6.20%200.00%206.25%200.02%206.25%200.63%20C6.25%200.98%205.80%202.16%205.25%203.25%20C4.70%204.34%204.25%205.47%204.25%205.75%20C4.25%206.04%204.03%206.71%203.75%207.25%20C3.30%208.13%203.25%208.72%203.25%2013.07%20C3.25%2018.68%203.00%2018.02%206.49%2021.51%20C9.96%2024.98%209.40%2024.75%2014.43%2024.75%20C19.25%2024.75%2019.86%2024.59%2022.47%2022.59%20C23.08%2022.13%2023.84%2021.75%2024.17%2021.75%20C24.89%2021.75%2027.04%2020.69%2028.25%2019.75%20C28.73%2019.37%2029.86%2018.70%2030.75%2018.25%20C31.64%2017.80%2032.77%2017.13%2033.25%2016.75%20C33.73%2016.37%2034.91%2015.67%2035.88%2015.18%20C36.84%2014.70%2038.13%2013.83%2038.75%2013.25%20C39.37%2012.67%2040.27%2012.00%2040.75%2011.75%20C41.23%2011.50%2042.13%2010.83%2042.75%2010.25%20C43.37%209.67%2044.27%209.00%2044.76%208.75%20C45.25%208.50%2046.37%207.60%2047.25%206.75%20C48.13%205.90%2049.50%204.88%2050.29%204.48%20C51.74%203.75%2051.74%203.75%2056.50%203.75%20C60.78%203.75%2061.37%203.80%2062.25%204.25%20C63.04%204.65%2063.72%204.75%2065.75%204.75%20C67.78%204.75%2068.46%204.85%2069.25%205.25%20C69.79%205.53%2070.69%205.75%2071.25%205.75%20C71.81%205.75%2072.71%205.97%2073.25%206.25%20C73.79%206.52%2074.69%206.75%2075.25%206.75%20C75.93%206.75%2076.91%207.07%2078.25%207.75%20C79.34%208.30%2080.47%208.75%2080.75%208.75%20C81.40%208.75%2087.60%2011.85%2088.75%2012.75%20C89.23%2013.13%2090.36%2013.80%2091.25%2014.25%20C92.14%2014.70%2093.27%2015.37%2093.75%2015.75%20C94.23%2016.12%2094.97%2016.61%2095.39%2016.82%20C95.81%2017.04%2096.88%2017.91%2097.75%2018.75%20C98.63%2019.60%20100.00%2020.62%20100.79%2021.02%20L102.24%2021.75%20L108.50%2021.75%20C114.28%2021.75%20114.85%2021.71%20115.75%2021.25%20C116.60%2020.82%20117.22%2020.75%20120.37%2020.75%20L124.00%2020.75%20L124.00%2021.56%20C123.99%2022.25%20123.79%2022.52%20122.71%2023.31%20C122.01%2023.83%20121.17%2024.25%20120.83%2024.25%20C120.50%2024.25%20119.79%2024.48%20119.25%2024.75%20C118.34%2025.21%20117.78%2025.25%20111.77%2025.25%20C105.58%2025.25%20105.21%2025.28%20104.13%2025.80%20L103.00%2026.35%20L101.87%2025.80%20C101.25%2025.50%20100.51%2025.25%20100.24%2025.25%20C99.22%2025.25%2096.77%2023.74%2095.10%2022.07%20C92.90%2019.89%2092.04%2019.25%2091.32%2019.25%20C90.43%2019.25%2088.01%2017.93%2086.75%2016.75%20C85.53%2015.61%2083.08%2014.25%2082.25%2014.25%20C81.97%2014.25%2080.84%2013.80%2079.75%2013.25%20C78.66%2012.70%2077.53%2012.25%2077.25%2012.25%20C76.96%2012.25%2076.29%2012.02%2075.75%2011.75%20C75.21%2011.47%2074.31%2011.25%2073.75%2011.25%20C73.07%2011.25%2072.09%2010.93%2070.75%2010.25%20C69.08%209.41%2068.52%209.25%2067.25%209.25%20C66.22%209.25%2065.41%209.09%2064.75%208.75%20C64.01%208.37%2063.28%208.25%2061.75%208.25%20C60.22%208.25%2059.49%208.13%2058.75%207.75%20C58.04%207.39%2057.28%207.25%2056.00%207.25%20C53.59%207.25%2051.97%208.09%2049.25%2010.75%20C48.11%2011.86%2046.77%2012.98%2046.28%2013.24%20C45.78%2013.49%2044.87%2014.17%2044.25%2014.75%20C43.63%2015.33%2042.79%2015.97%2042.38%2016.18%20C41.96%2016.39%2041.23%2016.88%2040.75%2017.25%20C40.27%2017.63%2039.14%2018.30%2038.25%2018.75%20C37.36%2019.20%2036.23%2019.87%2035.75%2020.25%20C35.27%2020.62%2034.54%2021.10%2034.12%2021.32%20C33.71%2021.53%2033.04%2022.02%2032.63%2022.41%20C31.31%2023.67%2030.42%2024.25%2029.82%2024.25%20C29.50%2024.25%2027.45%2025.15%2025.25%2026.25%20C22.08%2027.84%2021.03%2028.25%2020.16%2028.25%20C19.49%2028.25%2018.94%2028.40%2018.75%2028.62%20C18.49%2028.93%2017.64%2029.00%2014.00%2029.00%20C10.36%2029.00%209.51%2028.93%209.25%2028.62%20Z%22/%3E%3C/svg%3E");
  --type: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --hand: "Dobby Hand", "Hand Backup", "Comic Sans MS", cursive;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141b22; --ink: #e6e9e3; --pencil: #98a3ad; --pen: #9db0ff;
    --marker: #e3d23c; --marker-ink: #141b22; --wash: #1d2840; --rule: #2a343e; --margin-line: #26314d; --land: #1e2731; --land-edge: #34404c;
    --squiggle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-1%20-1%20126%2031%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%239db0ff%22%20d%3D%22M9.25%2028.62%20C9.08%2028.42%208.67%2028.25%208.35%2028.25%20C7.30%2028.25%205.05%2026.97%204.73%2026.20%20C4.57%2025.81%203.84%2024.88%203.11%2024.14%20C2.38%2023.41%201.39%2022.23%200.89%2021.53%20L0.00%2020.26%20L0.00%2013.41%20C0.00%207.63%200.06%206.51%200.38%206.25%20C0.58%206.08%200.75%205.67%200.75%205.34%20C0.75%205.01%201.20%203.84%201.75%202.75%20C2.30%201.66%202.75%200.59%202.75%200.38%20C2.75%200.08%203.10%200.00%204.50%200.00%20C6.20%200.00%206.25%200.02%206.25%200.63%20C6.25%200.98%205.80%202.16%205.25%203.25%20C4.70%204.34%204.25%205.47%204.25%205.75%20C4.25%206.04%204.03%206.71%203.75%207.25%20C3.30%208.13%203.25%208.72%203.25%2013.07%20C3.25%2018.68%203.00%2018.02%206.49%2021.51%20C9.96%2024.98%209.40%2024.75%2014.43%2024.75%20C19.25%2024.75%2019.86%2024.59%2022.47%2022.59%20C23.08%2022.13%2023.84%2021.75%2024.17%2021.75%20C24.89%2021.75%2027.04%2020.69%2028.25%2019.75%20C28.73%2019.37%2029.86%2018.70%2030.75%2018.25%20C31.64%2017.80%2032.77%2017.13%2033.25%2016.75%20C33.73%2016.37%2034.91%2015.67%2035.88%2015.18%20C36.84%2014.70%2038.13%2013.83%2038.75%2013.25%20C39.37%2012.67%2040.27%2012.00%2040.75%2011.75%20C41.23%2011.50%2042.13%2010.83%2042.75%2010.25%20C43.37%209.67%2044.27%209.00%2044.76%208.75%20C45.25%208.50%2046.37%207.60%2047.25%206.75%20C48.13%205.90%2049.50%204.88%2050.29%204.48%20C51.74%203.75%2051.74%203.75%2056.50%203.75%20C60.78%203.75%2061.37%203.80%2062.25%204.25%20C63.04%204.65%2063.72%204.75%2065.75%204.75%20C67.78%204.75%2068.46%204.85%2069.25%205.25%20C69.79%205.53%2070.69%205.75%2071.25%205.75%20C71.81%205.75%2072.71%205.97%2073.25%206.25%20C73.79%206.52%2074.69%206.75%2075.25%206.75%20C75.93%206.75%2076.91%207.07%2078.25%207.75%20C79.34%208.30%2080.47%208.75%2080.75%208.75%20C81.40%208.75%2087.60%2011.85%2088.75%2012.75%20C89.23%2013.13%2090.36%2013.80%2091.25%2014.25%20C92.14%2014.70%2093.27%2015.37%2093.75%2015.75%20C94.23%2016.12%2094.97%2016.61%2095.39%2016.82%20C95.81%2017.04%2096.88%2017.91%2097.75%2018.75%20C98.63%2019.60%20100.00%2020.62%20100.79%2021.02%20L102.24%2021.75%20L108.50%2021.75%20C114.28%2021.75%20114.85%2021.71%20115.75%2021.25%20C116.60%2020.82%20117.22%2020.75%20120.37%2020.75%20L124.00%2020.75%20L124.00%2021.56%20C123.99%2022.25%20123.79%2022.52%20122.71%2023.31%20C122.01%2023.83%20121.17%2024.25%20120.83%2024.25%20C120.50%2024.25%20119.79%2024.48%20119.25%2024.75%20C118.34%2025.21%20117.78%2025.25%20111.77%2025.25%20C105.58%2025.25%20105.21%2025.28%20104.13%2025.80%20L103.00%2026.35%20L101.87%2025.80%20C101.25%2025.50%20100.51%2025.25%20100.24%2025.25%20C99.22%2025.25%2096.77%2023.74%2095.10%2022.07%20C92.90%2019.89%2092.04%2019.25%2091.32%2019.25%20C90.43%2019.25%2088.01%2017.93%2086.75%2016.75%20C85.53%2015.61%2083.08%2014.25%2082.25%2014.25%20C81.97%2014.25%2080.84%2013.80%2079.75%2013.25%20C78.66%2012.70%2077.53%2012.25%2077.25%2012.25%20C76.96%2012.25%2076.29%2012.02%2075.75%2011.75%20C75.21%2011.47%2074.31%2011.25%2073.75%2011.25%20C73.07%2011.25%2072.09%2010.93%2070.75%2010.25%20C69.08%209.41%2068.52%209.25%2067.25%209.25%20C66.22%209.25%2065.41%209.09%2064.75%208.75%20C64.01%208.37%2063.28%208.25%2061.75%208.25%20C60.22%208.25%2059.49%208.13%2058.75%207.75%20C58.04%207.39%2057.28%207.25%2056.00%207.25%20C53.59%207.25%2051.97%208.09%2049.25%2010.75%20C48.11%2011.86%2046.77%2012.98%2046.28%2013.24%20C45.78%2013.49%2044.87%2014.17%2044.25%2014.75%20C43.63%2015.33%2042.79%2015.97%2042.38%2016.18%20C41.96%2016.39%2041.23%2016.88%2040.75%2017.25%20C40.27%2017.63%2039.14%2018.30%2038.25%2018.75%20C37.36%2019.20%2036.23%2019.87%2035.75%2020.25%20C35.27%2020.62%2034.54%2021.10%2034.12%2021.32%20C33.71%2021.53%2033.04%2022.02%2032.63%2022.41%20C31.31%2023.67%2030.42%2024.25%2029.82%2024.25%20C29.50%2024.25%2027.45%2025.15%2025.25%2026.25%20C22.08%2027.84%2021.03%2028.25%2020.16%2028.25%20C19.49%2028.25%2018.94%2028.40%2018.75%2028.62%20C18.49%2028.93%2017.64%2029.00%2014.00%2029.00%20C10.36%2029.00%209.51%2028.93%209.25%2028.62%20Z%22/%3E%3C/svg%3E"); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #141b22; --ink: #e6e9e3; --pencil: #98a3ad; --pen: #9db0ff;
  --marker: #e3d23c; --marker-ink: #141b22; --wash: #1d2840; --rule: #2a343e; --margin-line: #26314d; --land: #1e2731; --land-edge: #34404c;
    --squiggle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-1%20-1%20126%2031%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%239db0ff%22%20d%3D%22M9.25%2028.62%20C9.08%2028.42%208.67%2028.25%208.35%2028.25%20C7.30%2028.25%205.05%2026.97%204.73%2026.20%20C4.57%2025.81%203.84%2024.88%203.11%2024.14%20C2.38%2023.41%201.39%2022.23%200.89%2021.53%20L0.00%2020.26%20L0.00%2013.41%20C0.00%207.63%200.06%206.51%200.38%206.25%20C0.58%206.08%200.75%205.67%200.75%205.34%20C0.75%205.01%201.20%203.84%201.75%202.75%20C2.30%201.66%202.75%200.59%202.75%200.38%20C2.75%200.08%203.10%200.00%204.50%200.00%20C6.20%200.00%206.25%200.02%206.25%200.63%20C6.25%200.98%205.80%202.16%205.25%203.25%20C4.70%204.34%204.25%205.47%204.25%205.75%20C4.25%206.04%204.03%206.71%203.75%207.25%20C3.30%208.13%203.25%208.72%203.25%2013.07%20C3.25%2018.68%203.00%2018.02%206.49%2021.51%20C9.96%2024.98%209.40%2024.75%2014.43%2024.75%20C19.25%2024.75%2019.86%2024.59%2022.47%2022.59%20C23.08%2022.13%2023.84%2021.75%2024.17%2021.75%20C24.89%2021.75%2027.04%2020.69%2028.25%2019.75%20C28.73%2019.37%2029.86%2018.70%2030.75%2018.25%20C31.64%2017.80%2032.77%2017.13%2033.25%2016.75%20C33.73%2016.37%2034.91%2015.67%2035.88%2015.18%20C36.84%2014.70%2038.13%2013.83%2038.75%2013.25%20C39.37%2012.67%2040.27%2012.00%2040.75%2011.75%20C41.23%2011.50%2042.13%2010.83%2042.75%2010.25%20C43.37%209.67%2044.27%209.00%2044.76%208.75%20C45.25%208.50%2046.37%207.60%2047.25%206.75%20C48.13%205.90%2049.50%204.88%2050.29%204.48%20C51.74%203.75%2051.74%203.75%2056.50%203.75%20C60.78%203.75%2061.37%203.80%2062.25%204.25%20C63.04%204.65%2063.72%204.75%2065.75%204.75%20C67.78%204.75%2068.46%204.85%2069.25%205.25%20C69.79%205.53%2070.69%205.75%2071.25%205.75%20C71.81%205.75%2072.71%205.97%2073.25%206.25%20C73.79%206.52%2074.69%206.75%2075.25%206.75%20C75.93%206.75%2076.91%207.07%2078.25%207.75%20C79.34%208.30%2080.47%208.75%2080.75%208.75%20C81.40%208.75%2087.60%2011.85%2088.75%2012.75%20C89.23%2013.13%2090.36%2013.80%2091.25%2014.25%20C92.14%2014.70%2093.27%2015.37%2093.75%2015.75%20C94.23%2016.12%2094.97%2016.61%2095.39%2016.82%20C95.81%2017.04%2096.88%2017.91%2097.75%2018.75%20C98.63%2019.60%20100.00%2020.62%20100.79%2021.02%20L102.24%2021.75%20L108.50%2021.75%20C114.28%2021.75%20114.85%2021.71%20115.75%2021.25%20C116.60%2020.82%20117.22%2020.75%20120.37%2020.75%20L124.00%2020.75%20L124.00%2021.56%20C123.99%2022.25%20123.79%2022.52%20122.71%2023.31%20C122.01%2023.83%20121.17%2024.25%20120.83%2024.25%20C120.50%2024.25%20119.79%2024.48%20119.25%2024.75%20C118.34%2025.21%20117.78%2025.25%20111.77%2025.25%20C105.58%2025.25%20105.21%2025.28%20104.13%2025.80%20L103.00%2026.35%20L101.87%2025.80%20C101.25%2025.50%20100.51%2025.25%20100.24%2025.25%20C99.22%2025.25%2096.77%2023.74%2095.10%2022.07%20C92.90%2019.89%2092.04%2019.25%2091.32%2019.25%20C90.43%2019.25%2088.01%2017.93%2086.75%2016.75%20C85.53%2015.61%2083.08%2014.25%2082.25%2014.25%20C81.97%2014.25%2080.84%2013.80%2079.75%2013.25%20C78.66%2012.70%2077.53%2012.25%2077.25%2012.25%20C76.96%2012.25%2076.29%2012.02%2075.75%2011.75%20C75.21%2011.47%2074.31%2011.25%2073.75%2011.25%20C73.07%2011.25%2072.09%2010.93%2070.75%2010.25%20C69.08%209.41%2068.52%209.25%2067.25%209.25%20C66.22%209.25%2065.41%209.09%2064.75%208.75%20C64.01%208.37%2063.28%208.25%2061.75%208.25%20C60.22%208.25%2059.49%208.13%2058.75%207.75%20C58.04%207.39%2057.28%207.25%2056.00%207.25%20C53.59%207.25%2051.97%208.09%2049.25%2010.75%20C48.11%2011.86%2046.77%2012.98%2046.28%2013.24%20C45.78%2013.49%2044.87%2014.17%2044.25%2014.75%20C43.63%2015.33%2042.79%2015.97%2042.38%2016.18%20C41.96%2016.39%2041.23%2016.88%2040.75%2017.25%20C40.27%2017.63%2039.14%2018.30%2038.25%2018.75%20C37.36%2019.20%2036.23%2019.87%2035.75%2020.25%20C35.27%2020.62%2034.54%2021.10%2034.12%2021.32%20C33.71%2021.53%2033.04%2022.02%2032.63%2022.41%20C31.31%2023.67%2030.42%2024.25%2029.82%2024.25%20C29.50%2024.25%2027.45%2025.15%2025.25%2026.25%20C22.08%2027.84%2021.03%2028.25%2020.16%2028.25%20C19.49%2028.25%2018.94%2028.40%2018.75%2028.62%20C18.49%2028.93%2017.64%2029.00%2014.00%2029.00%20C10.36%2029.00%209.51%2028.93%209.25%2028.62%20Z%22/%3E%3C/svg%3E"); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--type);
  font-size: 1.0625rem;
  line-height: 1.55;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 4rem;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Hover: the straight underline turns into a pen squiggle. */
.sq, .more, .open, .links a, footer nav a, .intro a, .prose a, .contact p a {
  background-image: none; background-repeat: no-repeat; background-position: 0 100%; background-size: 100% .42em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: 5px;
}
.more:hover, .open:hover, .links a:hover, footer nav a:hover, .intro a:hover, .prose a:hover, .contact p a:hover,
.posts a:hover .t, .parts a:hover .t, .proj h3 a:hover, .pager a:hover strong {
  text-decoration: none; background-image: var(--squiggle); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% .42em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.posts .t, .parts .t, .pager strong { justify-self: start; padding-bottom: 5px; }
.proj h3 a { padding-bottom: 5px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--ink); color: var(--paper); padding: .5rem .75rem; z-index: 5; }

.page { max-width: 68rem; margin: 0 auto; }

/* Top bar */
.top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; padding-block: 1.25rem; }
.top .sig { display: block; color: var(--pen); text-decoration: none; line-height: 0; }
.top .sig svg { display: block; height: 2.6rem; width: auto; overflow: visible; }
.sig-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mark { display: block; color: var(--pen); margin: 0 0 1rem; }
.mark svg { height: 3.2rem; width: auto; }
.top nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .95rem; }
.top nav a { text-decoration: none; color: var(--pencil); }
.top nav a:hover { color: var(--ink); }
.top nav a[aria-current] { color: var(--ink); font-weight: 700; }

/* Text + margin grid */
.row { display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 1fr); gap: 1rem 4rem; padding-block: 3.5rem; border-top: 2px solid var(--ink); }
main > .row:first-child { border-top: 0; }
.row { position: relative; }
.row::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1.5px;
  left: calc(min(42rem, 100% - 4rem) + 2rem);
  background: var(--margin-line); pointer-events: none;
}
.note {
  font-family: var(--hand); color: var(--pen);
  font-size: 2.15rem; line-height: 1.02;
  transform: rotate(-2deg); transform-origin: left top;
  max-width: 16rem; align-self: start; margin: 0;
}
.note-inline { display: none; }
.note svg { display: block; overflow: visible; stroke: var(--pen); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

h2 { font-size: 1rem; font-weight: 700; margin: 0 0 1.75rem; }

/* Big page heads */
.big {
  font-size: clamp(2.5rem, 6.4vw, 4.9rem);
  font-weight: 900; line-height: .98; letter-spacing: -.035em;
  margin: 0 0 1.75rem; text-wrap: balance;
}
.intro { font-size: 1.2rem; max-width: 34rem; margin: 0 0 1rem; }
.about { font-size: 1.2rem; line-height: 1.6; max-width: 36rem; margin: 0 0 1.1rem; }
.about:last-child { margin-bottom: 0; }
.now { font-family: var(--hand); color: var(--pen); font-size: 1.7rem; line-height: 1.1; margin: 0 0 1.25rem; }
.now span { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
mark { background: linear-gradient(100deg, transparent .2em, var(--marker) .3em, var(--marker) calc(100% - .2em), transparent calc(100% - .1em)); color: var(--marker-ink); padding: 0 .15em; }
.who { position: relative; display: inline-block; }
.who svg { position: absolute; left: -3%; bottom: -.38em; width: 106%; height: .42em; color: var(--pen); }

/* Hand-drawn underline under a key number. It draws itself in once, when scrolled into view. */
.pen-under { position: relative; display: inline-block; }
.pen-under svg { position: absolute; left: -4%; bottom: -.16em; width: 108%; height: .2em; color: var(--pen); }
.pen-under.armed svg { clip-path: inset(0 100% 0 0); }
.pen-under.drawn svg { clip-path: inset(0 0 0 0); transition: clip-path 750ms cubic-bezier(.3,.7,.3,1); }

/* Buttons and links */
.btn { display: inline-block; background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none; padding: .7rem 1.15rem; border-radius: 3px; }
.btn:hover { background: var(--pen); }
.more { display: inline-block; margin-top: 1.5rem; font-weight: 700; }
.back { display: inline-block; margin-bottom: 1.5rem; color: var(--pencil); text-decoration: none; }
.back:hover { color: var(--ink); }

/* Post lists */
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { border-top: 1px solid var(--rule); }
.posts li:first-child { border-top: 0; }
.posts a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1.5rem; padding-block: 1.1rem; text-decoration: none; }
.posts .t { display: inline; font-size: 1.55rem; font-weight: 700; line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
.posts .d { color: var(--pencil); font-size: .95rem; white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: .35rem; }
.posts .s { grid-column: 1 / -1; color: var(--pencil); }
.posts.small .t { font-size: 1.25rem; }
.year { font-size: 2.4rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; margin: 3rem 0 .5rem; font-variant-numeric: tabular-nums; }
.year:first-of-type { margin-top: 0; }

/* Headshot */
.headshot { margin: 0; max-width: 15rem; }
.headshot img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 3px; transform: rotate(1.5deg); background: var(--rule); }

/* Thread map */
.row.wide { grid-template-columns: minmax(0, 1fr); }
.row.wide::before { display: none; }
.map-scroll { overflow-x: auto; margin: 0 -4px; padding: 4px; }
.thread-map { display: block; width: 100%; min-width: 760px; height: auto; font-family: var(--hand); }
.thread-map .land { fill: var(--land); stroke: var(--land-edge); stroke-width: 1.2; filter: url(#pen); }
.thread-map .ink { fill: none; stroke: var(--pen); stroke-width: 2.2; stroke-linecap: round; opacity: .78; transition: stroke-width 150ms ease, opacity 150ms ease; }
.thread-map .hit { fill: none; stroke: transparent; stroke-width: 16; }
.thread-map .thread:hover .ink, .thread-map .thread:focus-visible .ink, .thread-map .thread.on .ink { stroke-width: 4.2; opacity: 1; }
.thread-map .thread:focus-visible { outline: none; }
.thread-map .threads:hover .thread:not(:hover) .ink { opacity: .32; }
.thread-map .dots circle { fill: var(--pen); }
.thread-map .names text { fill: var(--pen); font-size: 23px; }
.thread-map .home-note { font-size: 21px; fill: var(--pencil); }
.map-caption { margin: .75rem 0 0; color: var(--pencil); min-height: 1.6em; }
.map-caption strong { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .thread-map .ink { transition: none; } }

/* Project screenshots */
.shot { margin: 0 0 2.25rem; }
.shot img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 3px; background: var(--rule); }
.shot a { display: block; transform: rotate(-.6deg); transition: transform 200ms ease; }
.shot a:hover { transform: rotate(0deg); }
.shot a:focus-visible { outline: 2px solid var(--pen); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .shot a { transition: none; } }

/* Font tester */
.tester { margin: 0 0 2.5rem; border: 2px solid var(--ink); border-radius: 3px; }
.tester textarea { display: block; width: 100%; min-height: 9rem; resize: vertical; border: 0; background: transparent; color: var(--pen);
  font-family: var(--hand); font-size: 48px; line-height: 1.1; padding: 1rem 1.1rem; }
.tester textarea:focus-visible { outline: 2px solid var(--pen); outline-offset: -4px; }
.tester-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; border-top: 2px solid var(--ink); padding: .65rem 1.1rem; font-size: .95rem; }
.tester fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.tester fieldset label, .tester .size { display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.tester input[type="radio"] { accent-color: var(--pen); margin: 0; }
.tester input[type="range"] { accent-color: var(--pen); width: 9rem; }
.tester .size span { color: var(--pencil); }

/* Series */
.series-list { display: grid; gap: 2.5rem; }
.series-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.series-head h3 { margin: 0; font-size: 1.85rem; font-weight: 900; letter-spacing: -.025em; line-height: 1.05; }
.series-head span { color: var(--pencil); font-variant-numeric: tabular-nums; }
.series > p { margin: .4rem 0 1rem; color: var(--pencil); max-width: 36rem; }
.parts { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--ink); }
.parts a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: .1rem 1rem; align-items: baseline; padding: .6rem 0 .6rem 1rem; text-decoration: none; }
.parts .n { color: var(--pen); font-family: var(--hand); font-size: 1.45rem; line-height: 1; }
.parts .t { font-weight: 700; font-size: 1.1rem; line-height: 1.25; }
.parts .d { color: var(--pencil); font-size: .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.posts .part { grid-column: 1 / -1; font-family: var(--hand); color: var(--pen); font-size: 1.3rem; line-height: 1; }

/* Substack signup */
.signup { margin-top: 2.5rem; padding: 1.5rem; background: var(--wash); display: grid; gap: 1rem; }
.signup h3 { margin: 0 0 .2rem; font-size: 1.25rem; }
.signup p { margin: 0; color: var(--pencil); }
.signup-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.signup input { flex: 1 1 14rem; min-width: 0; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 3px; padding: .6rem .8rem; }
.signup input::placeholder { color: var(--pencil); }
.signup input:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
.signup .fine { font-size: .9rem; }

/* Hire me form */
.enquiry { margin-top: 2.5rem; padding: 1.5rem; background: var(--wash); display: grid; gap: 1.1rem; }
.enquiry h3 { margin: 0; font-size: 1.25rem; }
.enquiry p { margin: 0; color: var(--pencil); }
.enquiry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.enquiry label { display: grid; gap: .35rem; font-weight: 700; font-size: .95rem; }
.enquiry label em { font-style: normal; font-weight: 400; color: var(--pencil); }
.enquiry .full { grid-column: 1 / -1; }
.enquiry input, .enquiry textarea { font: inherit; font-weight: 400; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 3px; padding: .6rem .8rem; min-width: 0; width: 100%; box-sizing: border-box; }
.enquiry textarea { resize: vertical; min-height: 7rem; }
.enquiry input::placeholder { color: var(--pencil); }
.enquiry input:focus-visible, .enquiry textarea:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
.enquiry-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.enquiry button { font: inherit; font-weight: 700; border: 0; cursor: pointer; }
.enquiry button:disabled { opacity: .6; cursor: progress; }
.enquiry .fine { font-size: .9rem; }
.enquiry .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry { position: relative; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Projects */
.group { font-size: .95rem; font-weight: 500; color: var(--pencil); margin: 2.75rem 0 1.25rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rule); }
.group:first-of-type { margin-top: 0; }
.projects { display: grid; gap: 2.25rem; }
.proj h3 { font-size: 1.55rem; font-weight: 700; letter-spacing: -.015em; margin: 0 0 .35rem; line-height: 1.15; }
.proj h3 a { text-decoration: none; }
.proj p { margin: 0; color: var(--pencil); max-width: 36rem; }
.proj .open { display: inline-block; margin-top: .5rem; font-weight: 700; }
.wip { font-family: var(--hand); color: var(--pen); font-size: 1.5rem; margin-left: .45rem; font-weight: 400; letter-spacing: 0; white-space: nowrap; }

/* Project page */
.prose { max-width: 40rem; }
.prose h2, .prose h3 { font-size: 1.25rem; margin: 2.25rem 0 .5rem; letter-spacing: -.01em; }
.prose p { margin: 0 0 1rem; }
.facts { margin: 0; display: grid; gap: .9rem; }
.facts div { display: grid; gap: .1rem; }
.facts dt { font-size: .9rem; color: var(--pencil); }
.facts dd { margin: 0; font-weight: 700; }
.side { display: grid; gap: 2rem; align-content: start; }
.side .note { max-width: 15rem; }
.cta { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin: 0 0 1.5rem; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 2rem; border-top: 2px solid var(--ink); }
.pager a { text-decoration: none; display: grid; }
.pager span { color: var(--pencil); font-size: .9rem; }
.pager strong { font-size: 1.2rem; }
.pager .next { text-align: right; margin-left: auto; }

/* Work + CV */
.jobs { margin: 0; display: grid; gap: 1rem; }
.jobs div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1.5rem; }
.jobs dt { font-weight: 700; }
.jobs dd { margin: 0; color: var(--pencil); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jobs .org { grid-column: 1; color: var(--pencil); white-space: normal; }
.cv-entry { display: grid; gap: .2rem; padding-block: 1.25rem; border-top: 1px solid var(--rule); }
.cv-entry:first-of-type { border-top: 0; padding-top: 0; }
.cv-entry .head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1.5rem; }
.cv-entry h3 { margin: 0; font-size: 1.25rem; letter-spacing: -.01em; }
.cv-entry .when { color: var(--pencil); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-entry .org { color: var(--pencil); }
.cv-entry ul { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.cv-block + .cv-block { margin-top: 3rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem .5rem; list-style: none; padding: 0; margin: 0; }
.tags li { border: 1.5px solid var(--rule); border-radius: 3px; padding: .15rem .55rem; font-size: .95rem; }
.kv { margin: 0; display: grid; gap: 1.5rem; align-content: start; align-self: start; }
.kv dt { font-weight: 700; margin-bottom: .35rem; }
.kv dd { margin: 0; }

/* Hire */
.lede { font-size: 1.35rem; font-weight: 700; line-height: 1.25; margin: 0 0 1.75rem; max-width: 34rem; text-wrap: balance; }
.results { margin: 0 0 2.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.results div { border-top: 3px solid var(--ink); padding-top: .75rem; }
.results dt { font-size: clamp(2.4rem, 4.6vw, 3.4rem); font-weight: 900; letter-spacing: -.035em; line-height: 1; }
.results dd { margin: .5rem 0 0; }
.results dd span { display: block; margin-top: .35rem; color: var(--pencil); font-size: .9rem; }
.services { margin: 0 0 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; }
.services dt { font-weight: 700; margin-bottom: .25rem; }
.services dd { margin: 0; color: var(--pencil); }

/* Contact */
.contact p { font-size: 1.2rem; margin: 0 0 1.25rem; max-width: 34rem; }
.email { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 0 0 1.75rem; }
.email span { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; user-select: all; }
.email button { font: inherit; font-weight: 700; font-size: .9rem; color: var(--ink); background: transparent; border: 2px solid var(--ink); border-radius: 3px; padding: .3rem .8rem; cursor: pointer; }
.email button:hover { border-color: var(--pen); color: var(--pen); }
.links { display: flex; flex-wrap: wrap; gap: .75rem 2rem; font-size: 1.2rem; font-weight: 700; }

/* "Make a balagan": scatters the page like papers on a desk, and tidies it back up. */
.balagan-btn { display: block; margin-top: .6rem; font: inherit; font-family: var(--hand); font-weight: 700; font-size: 1.05em; color: var(--pen);
  background: none; border: 0; padding: 0 0 6px; cursor: pointer; background-image: var(--squiggle); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 100% .42em; transform: rotate(-3deg); transform-origin: left center; }
.balagan-btn.small { display: inline; margin: 0 0 0 .75rem; font-size: 1.45rem; font-weight: 400; }
.balagan-btn:hover { color: var(--ink); }
[data-scatter] { transition: transform 650ms cubic-bezier(.2,.9,.25,1.15); will-change: transform; }
html.balagan, html.balagan body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { [data-scatter] { transition: none; } }

/* Profile logos */
.icons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.icon-link { display: inline-grid; place-items: center; color: var(--ink); border-radius: 50%; transition: color 150ms ease, transform 150ms ease; }
.icon-link svg { display: block; fill: currentColor; }
.icon-link:hover { color: var(--pen); transform: rotate(-6deg); }
.icon-link:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; }
.contact-icons { gap: .9rem; }
.contact-icons .icon-link { width: 3rem; height: 3rem; }
.contact-icons svg { width: 1.75rem; height: 1.75rem; }
.footer-icons .icon-link { width: 2rem; height: 2rem; color: var(--pencil); }
.footer-icons svg { width: 1.1rem; height: 1.1rem; }
@media (prefers-reduced-motion: reduce) { .icon-link { transition: none; } .icon-link:hover { transform: none; } }

footer { padding-top: 2rem; border-top: 2px solid var(--ink); color: var(--pencil); font-size: .9rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }
footer nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }

@media (max-width: 760px) {
  .row::before { display: none; }
  .top { display: grid; gap: .6rem; padding-block: 1rem .75rem; }
  .top nav { flex-wrap: nowrap; gap: 1.1rem; font-size: 1rem; overflow-x: auto; scrollbar-width: none; }
  .top nav a { white-space: nowrap; padding-block: .25rem; }
  .top nav .wide-only { display: none; }
  .parts a { grid-template-columns: minmax(0, 1fr) auto; }
  .parts .n { grid-column: 1 / -1; }
  .row { grid-template-columns: minmax(0, 1fr); padding-block: 2.5rem; }
  .row > .note-side { display: none; }
  .note-inline { display: block; font-size: 1.65rem; max-width: none; margin: -.75rem 0 1.75rem; }
  .side .note { order: -1; font-size: 1.65rem; max-width: none; }
  .note svg { display: none; }
  .side { gap: 1.25rem; }
  #about .side { order: -1; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 1rem 1.25rem; }
  #about .side .note { order: 0; font-size: 1.45rem; }
  .headshot { max-width: none; }
  .posts .t, .proj h3 { font-size: 1.3rem; }
  .posts a { grid-template-columns: minmax(0, 1fr); }
  .posts .d { padding-top: 0; }
  .jobs div { grid-template-columns: minmax(0, 1fr); }
  .services { grid-template-columns: minmax(0, 1fr); }
  .enquiry-grid { grid-template-columns: minmax(0, 1fr); }
  .results { grid-template-columns: minmax(0, 1fr); }
  .email span { font-size: 1.25rem; }
}

/* Print: drop the site chrome and margin notes; the CV fits on one page. */
.print-only { display: none; }
@media print {
  @page { size: letter; margin: 11mm 13mm; }
  :root { --paper: #fff; --ink: #000; --pencil: #444; --rule: #bbb; --pen: #000; color-scheme: light; }
  body { background: #fff; color: #000; font-size: 8.9pt; line-height: 1.28; padding: 0; }
  .page { max-width: none; }
  .shot, .top nav, .note, .skip, .cta, footer, .pager, .signup, .enquiry, .back, .row::before, .balagan-btn { display: none !important; }
  [data-scatter] { transform: none !important; }
  .top { padding: 0 0 2mm; }
  .top .sig svg { display: none; }
  .sig-name { position: static; width: auto; height: auto; clip: auto; font-family: var(--type); font-weight: 900; color: #000; font-size: 18pt; letter-spacing: -.02em; line-height: 1.2; }
  .print-only { display: block; }
  a { text-decoration: none; }
  .row { display: block; padding-block: 0; border-top: 0; }
  .big { font-size: 13pt; letter-spacing: 0; margin: 0 0 1mm; }
  .intro { font-size: 9.2pt; margin: 0 0 3mm; max-width: none; }
  .contact-line { margin: 0 0 4mm; font-size: 9pt; }
  h2 { font-size: 10pt; margin: 3mm 0 1mm; padding-bottom: 1mm; border-bottom: 1px solid #000; }
  .cv-block + .cv-block { margin-top: 0; }
  /* Role, organization and dates share one line in print. */
  .cv-entry { padding-block: .9mm; border-top: 0; break-inside: avoid; gap: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 2mm; align-items: baseline; }
  .cv-entry .head { display: contents; }
  .cv-entry h3 { font-size: 9.4pt; grid-column: 1; grid-row: 1; }
  .cv-entry .org { grid-column: 2; grid-row: 1; }
  .cv-entry .when { grid-column: 3; grid-row: 1; }
  .cv-entry ul, .cv-entry p { grid-column: 1 / -1; }
  .cv-entry p.org { grid-column: 1 / -1; grid-row: auto; }
  .row:first-child .big, .row:first-child .intro { display: none; }
  .cv-entry ul { margin: .6mm 0 0; gap: 0; padding-left: 4mm; }
  .cv-entry p { margin: .5mm 0 0; }
  .kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3mm; margin-top: 4mm; border-top: 1px solid #000; padding-top: 2mm; }
  .kv dt { margin-bottom: .5mm; font-size: 9pt; }
  .tags { gap: 0; display: block; }
  .tags li { display: inline; border: 0; padding: 0; font-size: 8.6pt; }
  .tags li + li::before { content: ", "; }
}