@font-face{font-family:Instrument;src:url(brand/fonts/InstrumentSerif-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:Instrument;src:url(brand/fonts/InstrumentSerif-Italic.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:Plex;src:url(brand/fonts/IBMPlexMono-Regular.woff2) format("woff2");font-display:swap}

:root{--paper:#F3EFE6;--ink:#1A1A1A;--signal:#C8471F;--salmon:#E9D9C4;--g:clamp(24px,6vw,110px);--sw:2.5px;
  /* roles: everything below is set from these, so the theme is one block */
  --bg:var(--paper);--fg:var(--ink);--mass:var(--ink);--signal-text:var(--signal);--muted:#5f5c55;color-scheme:light}
/* dark: the kit's Live palette (ink ground, paper type, the same orange for the line); the rocks in paper, the true inverse of ink rocks on paper (Kinsa, 16 Oct: dark on dark read as missing); small orange type lifted to 5.3:1 */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:var(--ink);--fg:var(--paper);--mass:var(--paper);--signal-text:#E36D45;--muted:#A6A299;color-scheme:dark}}
:root[data-theme=dark]{--bg:var(--ink);--fg:var(--paper);--mass:var(--paper);--signal-text:#E36D45;--muted:#A6A299;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Instrument,Georgia,serif;overflow-x:clip;-webkit-font-smoothing:antialiased;position:relative}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:6px}
h1,h2,p{margin:0}
h1,h2{font-weight:400;letter-spacing:-.025em;line-height:.9}
.nowrap{white-space:nowrap}
.eyebrow{font-family:Plex,monospace;font-size:12px;line-height:1.6;letter-spacing:.08em;text-transform:uppercase}
.index{color:var(--signal-text)}
.sec{display:flex;gap:22px;align-items:center;margin-bottom:34px}
.skip{position:absolute;left:20px;top:-100px;background:var(--bg);z-index:50}
.skip:focus{top:20px}
.dash{display:inline-block;width:.78em;height:.045em;background:var(--signal);vertical-align:.3em;margin-left:.16em}

/* ---- three forms of one material; every straight canvas edge lies outside the document ---- */
.comp{position:absolute;pointer-events:none;z-index:0}
.comp .ink{display:block;width:100%;background:var(--mass);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect}
.comp .seam,.marker,.journey .path{position:absolute;overflow:visible;pointer-events:none}
.comp .seam{inset:0;width:100%;height:100%}
.comp .seam path,.marker path,.journey path{fill:none;stroke:var(--signal);stroke-width:var(--sw);stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.comp-diag{width:min(112vw,1613px);left:calc(min(112vw,1613px) * -0.5179);top:-1vw;transform:scaleY(-1)}   /* capped at its 1440 size: on wider screens the mass stays pinned to the corner instead of growing down into the list */
.comp-diag .ink{aspect-ratio:688/1024;-webkit-mask-image:url(assets/ink-diag.svg),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon fill='%23000' points='0,0 52,0 52,34 100,34 100,100 0,100'/%3E%3C/svg%3E");mask-image:url(assets/ink-diag.svg),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon fill='%23000' points='0,0 52,0 52,34 100,34 100,100 0,100'/%3E%3C/svg%3E")}
.comp-frag{right:-7vw;top:120px;height:min(calc(100% - 160px),56vw)}   /* sized by the section's height so it never reaches Field Notes; 56vw is the old 30vw width's height */
.comp-frag .ink{width:auto;height:100%}
.comp-frag .ink{aspect-ratio:var(--frag-ar,118/220);-webkit-mask-image:url(assets/ink-fragment.svg),url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20fill%3D%27%23000%27%20points%3D%270.00%2C0.87%200.62%2C1.04%201.25%2C1.11%201.88%2C1.32%202.50%2C1.04%203.12%2C1.29%203.75%2C0.04%204.38%2C0.65%205.00%2C1.32%205.62%2C0.91%206.25%2C1.26%206.88%2C0.16%207.50%2C0.66%208.12%2C0.35%208.75%2C0.76%209.38%2C0.80%2010.00%2C0.02%2010.62%2C0.30%2011.25%2C0.39%2011.88%2C1.28%2012.50%2C1.07%2013.12%2C0.22%2013.75%2C1.12%2014.38%2C0.19%2015.00%2C0.86%2015.62%2C0.18%2016.25%2C0.00%2016.88%2C1.22%2017.50%2C0.29%2018.12%2C0.30%2018.75%2C1.38%2019.38%2C1.22%2020.00%2C0.41%2020.62%2C1.35%2021.25%2C0.75%2021.88%2C0.95%2022.50%2C0.29%2023.12%2C1.32%2023.75%2C0.97%2024.38%2C1.35%2025.00%2C1.25%2025.62%2C0.42%2026.25%2C0.51%2026.88%2C0.23%2027.50%2C0.20%2028.12%2C0.09%2028.75%2C0.42%2029.38%2C0.84%2030.00%2C0.00%2030.62%2C0.95%2031.25%2C0.47%2031.88%2C0.43%2032.50%2C1.15%2033.12%2C0.67%2033.75%2C0.44%2034.38%2C0.67%2035.00%2C0.99%2035.62%2C0.08%2036.25%2C1.37%2036.88%2C0.03%2037.50%2C1.05%2038.12%2C1.18%2038.75%2C0.03%2039.38%2C1.10%2040.00%2C0.51%2040.62%2C0.81%2041.25%2C0.01%2041.88%2C0.07%2042.50%2C0.25%2043.12%2C1.34%2043.75%2C0.28%2044.38%2C1.06%2045.00%2C1.30%2045.62%2C1.32%2046.25%2C0.48%2046.88%2C0.50%2047.50%2C0.73%2048.12%2C1.09%2048.75%2C0.15%2049.38%2C1.05%2050.00%2C1.12%2050.62%2C1.20%2051.25%2C0.05%2051.88%2C1.32%2052.50%2C0.13%2053.12%2C0.48%2053.75%2C0.86%2054.38%2C1.29%2055.00%2C0.48%2055.62%2C1.29%2056.25%2C0.76%2056.88%2C0.44%2057.50%2C0.44%2058.12%2C0.25%2058.75%2C0.11%2059.38%2C0.21%2060.00%2C0.96%2060.62%2C1.40%2061.25%2C0.23%2061.88%2C0.07%2062.50%2C1.38%2063.12%2C0.75%2063.75%2C0.57%2064.38%2C0.33%2065.00%2C0.83%2065.62%2C1.16%2066.25%2C0.64%2066.88%2C0.59%2067.50%2C0.08%2068.12%2C1.28%2068.75%2C0.05%2069.38%2C0.69%2070.00%2C1.17%2070.62%2C0.18%2071.25%2C1.02%2071.88%2C1.33%2072.50%2C0.88%2073.12%2C1.10%2073.75%2C0.15%2074.38%2C0.61%2075.00%2C0.21%2075.62%2C1.18%2076.25%2C0.41%2076.88%2C0.63%2077.50%2C1.40%2078.12%2C1.19%2078.75%2C1.37%2079.38%2C0.63%2080.00%2C0.68%2080.62%2C1.02%2081.25%2C0.67%2081.88%2C0.41%2082.50%2C0.57%2083.12%2C0.21%2083.75%2C0.53%2084.38%2C1.38%2085.00%2C1.34%2085.62%2C0.88%2086.25%2C0.70%2086.88%2C0.47%2087.50%2C0.12%2088.12%2C0.38%2088.75%2C1.09%2089.38%2C1.21%2090.00%2C0.51%2090.62%2C1.10%2091.25%2C1.08%2091.88%2C0.97%2092.50%2C0.93%2093.12%2C1.06%2093.75%2C0.51%2094.38%2C0.99%2095.00%2C0.39%2095.62%2C0.68%2096.25%2C1.08%2096.88%2C0.97%2097.50%2C0.41%2098.12%2C1.32%2098.75%2C0.91%2099.38%2C0.81%20100.00%2C0.02%20100.00%2C0.00%20100.00%2C100.00%20100.00%2C99.23%2099.38%2C99.65%2098.75%2C99.06%2098.12%2C99.35%2097.50%2C98.86%2096.88%2C99.09%2096.25%2C98.88%2095.62%2C99.51%2095.00%2C99.10%2094.38%2C98.97%2093.75%2C98.84%2093.12%2C99.51%2092.50%2C98.82%2091.88%2C98.78%2091.25%2C99.04%2090.62%2C98.63%2090.00%2C98.66%2089.38%2C99.27%2088.75%2C99.26%2088.12%2C99.77%2087.50%2C98.83%2086.88%2C98.69%2086.25%2C99.33%2085.62%2C99.03%2085.00%2C98.99%2084.38%2C98.98%2083.75%2C99.76%2083.12%2C98.91%2082.50%2C99.19%2081.88%2C99.07%2081.25%2C99.41%2080.62%2C99.13%2080.00%2C98.92%2079.38%2C99.11%2078.75%2C98.99%2078.12%2C99.96%2077.50%2C99.78%2076.88%2C99.38%2076.25%2C99.09%2075.62%2C99.69%2075.00%2C99.04%2074.38%2C99.12%2073.75%2C99.94%2073.12%2C99.34%2072.50%2C99.68%2071.88%2C99.92%2071.25%2C99.81%2070.62%2C99.56%2070.00%2C99.75%2069.38%2C99.73%2068.75%2C99.95%2068.12%2C99.35%2067.50%2C99.47%2066.88%2C99.14%2066.25%2C99.17%2065.62%2C99.67%2065.00%2C98.74%2064.38%2C100.00%2063.75%2C99.43%2063.12%2C99.61%2062.50%2C99.43%2061.88%2C99.84%2061.25%2C98.84%2060.62%2C99.48%2060.00%2C99.95%2059.38%2C99.14%2058.75%2C99.87%2058.12%2C99.24%2057.50%2C99.52%2056.88%2C99.19%2056.25%2C98.66%2055.62%2C98.85%2055.00%2C99.41%2054.38%2C98.86%2053.75%2C99.10%2053.12%2C99.48%2052.50%2C99.80%2051.88%2C99.17%2051.25%2C99.21%2050.62%2C98.66%2050.00%2C98.64%2049.38%2C99.15%2048.75%2C99.51%2048.12%2C98.75%2047.50%2C100.00%2046.88%2C99.85%2046.25%2C99.21%2045.62%2C99.14%2045.00%2C99.80%2044.38%2C99.12%2043.75%2C98.75%2043.12%2C99.47%2042.50%2C99.40%2041.88%2C99.68%2041.25%2C99.59%2040.62%2C98.64%2040.00%2C99.47%2039.38%2C98.65%2038.75%2C98.72%2038.12%2C99.17%2037.50%2C99.64%2036.88%2C98.63%2036.25%2C99.31%2035.62%2C99.42%2035.00%2C99.55%2034.38%2C98.62%2033.75%2C99.31%2033.12%2C99.60%2032.50%2C99.33%2031.88%2C99.83%2031.25%2C99.13%2030.62%2C99.38%2030.00%2C99.59%2029.38%2C98.91%2028.75%2C98.84%2028.12%2C99.98%2027.50%2C99.25%2026.88%2C99.62%2026.25%2C98.69%2025.62%2C98.91%2025.00%2C99.66%2024.38%2C99.63%2023.75%2C99.78%2023.12%2C98.62%2022.50%2C99.59%2021.88%2C99.15%2021.25%2C99.34%2020.62%2C99.10%2020.00%2C99.15%2019.38%2C98.96%2018.75%2C99.83%2018.12%2C98.94%2017.50%2C99.58%2016.88%2C99.25%2016.25%2C99.53%2015.62%2C99.58%2015.00%2C99.26%2014.38%2C99.35%2013.75%2C99.49%2013.12%2C98.96%2012.50%2C99.17%2011.88%2C99.95%2011.25%2C99.65%2010.62%2C99.36%2010.00%2C98.72%209.38%2C98.76%208.75%2C99.24%208.12%2C99.98%207.50%2C98.91%206.88%2C99.40%206.25%2C99.19%205.62%2C99.01%205.00%2C99.11%204.38%2C99.33%203.75%2C98.72%203.12%2C99.46%202.50%2C99.45%201.88%2C98.81%201.25%2C99.72%200.62%2C99.58%200.00%2C98.84%200.00%2C100.00%27/%3E%3C/svg%3E");mask-image:url(assets/ink-fragment.svg),url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpolygon%20fill%3D%27%23000%27%20points%3D%270.00%2C0.87%200.62%2C1.04%201.25%2C1.11%201.88%2C1.32%202.50%2C1.04%203.12%2C1.29%203.75%2C0.04%204.38%2C0.65%205.00%2C1.32%205.62%2C0.91%206.25%2C1.26%206.88%2C0.16%207.50%2C0.66%208.12%2C0.35%208.75%2C0.76%209.38%2C0.80%2010.00%2C0.02%2010.62%2C0.30%2011.25%2C0.39%2011.88%2C1.28%2012.50%2C1.07%2013.12%2C0.22%2013.75%2C1.12%2014.38%2C0.19%2015.00%2C0.86%2015.62%2C0.18%2016.25%2C0.00%2016.88%2C1.22%2017.50%2C0.29%2018.12%2C0.30%2018.75%2C1.38%2019.38%2C1.22%2020.00%2C0.41%2020.62%2C1.35%2021.25%2C0.75%2021.88%2C0.95%2022.50%2C0.29%2023.12%2C1.32%2023.75%2C0.97%2024.38%2C1.35%2025.00%2C1.25%2025.62%2C0.42%2026.25%2C0.51%2026.88%2C0.23%2027.50%2C0.20%2028.12%2C0.09%2028.75%2C0.42%2029.38%2C0.84%2030.00%2C0.00%2030.62%2C0.95%2031.25%2C0.47%2031.88%2C0.43%2032.50%2C1.15%2033.12%2C0.67%2033.75%2C0.44%2034.38%2C0.67%2035.00%2C0.99%2035.62%2C0.08%2036.25%2C1.37%2036.88%2C0.03%2037.50%2C1.05%2038.12%2C1.18%2038.75%2C0.03%2039.38%2C1.10%2040.00%2C0.51%2040.62%2C0.81%2041.25%2C0.01%2041.88%2C0.07%2042.50%2C0.25%2043.12%2C1.34%2043.75%2C0.28%2044.38%2C1.06%2045.00%2C1.30%2045.62%2C1.32%2046.25%2C0.48%2046.88%2C0.50%2047.50%2C0.73%2048.12%2C1.09%2048.75%2C0.15%2049.38%2C1.05%2050.00%2C1.12%2050.62%2C1.20%2051.25%2C0.05%2051.88%2C1.32%2052.50%2C0.13%2053.12%2C0.48%2053.75%2C0.86%2054.38%2C1.29%2055.00%2C0.48%2055.62%2C1.29%2056.25%2C0.76%2056.88%2C0.44%2057.50%2C0.44%2058.12%2C0.25%2058.75%2C0.11%2059.38%2C0.21%2060.00%2C0.96%2060.62%2C1.40%2061.25%2C0.23%2061.88%2C0.07%2062.50%2C1.38%2063.12%2C0.75%2063.75%2C0.57%2064.38%2C0.33%2065.00%2C0.83%2065.62%2C1.16%2066.25%2C0.64%2066.88%2C0.59%2067.50%2C0.08%2068.12%2C1.28%2068.75%2C0.05%2069.38%2C0.69%2070.00%2C1.17%2070.62%2C0.18%2071.25%2C1.02%2071.88%2C1.33%2072.50%2C0.88%2073.12%2C1.10%2073.75%2C0.15%2074.38%2C0.61%2075.00%2C0.21%2075.62%2C1.18%2076.25%2C0.41%2076.88%2C0.63%2077.50%2C1.40%2078.12%2C1.19%2078.75%2C1.37%2079.38%2C0.63%2080.00%2C0.68%2080.62%2C1.02%2081.25%2C0.67%2081.88%2C0.41%2082.50%2C0.57%2083.12%2C0.21%2083.75%2C0.53%2084.38%2C1.38%2085.00%2C1.34%2085.62%2C0.88%2086.25%2C0.70%2086.88%2C0.47%2087.50%2C0.12%2088.12%2C0.38%2088.75%2C1.09%2089.38%2C1.21%2090.00%2C0.51%2090.62%2C1.10%2091.25%2C1.08%2091.88%2C0.97%2092.50%2C0.93%2093.12%2C1.06%2093.75%2C0.51%2094.38%2C0.99%2095.00%2C0.39%2095.62%2C0.68%2096.25%2C1.08%2096.88%2C0.97%2097.50%2C0.41%2098.12%2C1.32%2098.75%2C0.91%2099.38%2C0.81%20100.00%2C0.02%20100.00%2C0.00%20100.00%2C100.00%20100.00%2C99.23%2099.38%2C99.65%2098.75%2C99.06%2098.12%2C99.35%2097.50%2C98.86%2096.88%2C99.09%2096.25%2C98.88%2095.62%2C99.51%2095.00%2C99.10%2094.38%2C98.97%2093.75%2C98.84%2093.12%2C99.51%2092.50%2C98.82%2091.88%2C98.78%2091.25%2C99.04%2090.62%2C98.63%2090.00%2C98.66%2089.38%2C99.27%2088.75%2C99.26%2088.12%2C99.77%2087.50%2C98.83%2086.88%2C98.69%2086.25%2C99.33%2085.62%2C99.03%2085.00%2C98.99%2084.38%2C98.98%2083.75%2C99.76%2083.12%2C98.91%2082.50%2C99.19%2081.88%2C99.07%2081.25%2C99.41%2080.62%2C99.13%2080.00%2C98.92%2079.38%2C99.11%2078.75%2C98.99%2078.12%2C99.96%2077.50%2C99.78%2076.88%2C99.38%2076.25%2C99.09%2075.62%2C99.69%2075.00%2C99.04%2074.38%2C99.12%2073.75%2C99.94%2073.12%2C99.34%2072.50%2C99.68%2071.88%2C99.92%2071.25%2C99.81%2070.62%2C99.56%2070.00%2C99.75%2069.38%2C99.73%2068.75%2C99.95%2068.12%2C99.35%2067.50%2C99.47%2066.88%2C99.14%2066.25%2C99.17%2065.62%2C99.67%2065.00%2C98.74%2064.38%2C100.00%2063.75%2C99.43%2063.12%2C99.61%2062.50%2C99.43%2061.88%2C99.84%2061.25%2C98.84%2060.62%2C99.48%2060.00%2C99.95%2059.38%2C99.14%2058.75%2C99.87%2058.12%2C99.24%2057.50%2C99.52%2056.88%2C99.19%2056.25%2C98.66%2055.62%2C98.85%2055.00%2C99.41%2054.38%2C98.86%2053.75%2C99.10%2053.12%2C99.48%2052.50%2C99.80%2051.88%2C99.17%2051.25%2C99.21%2050.62%2C98.66%2050.00%2C98.64%2049.38%2C99.15%2048.75%2C99.51%2048.12%2C98.75%2047.50%2C100.00%2046.88%2C99.85%2046.25%2C99.21%2045.62%2C99.14%2045.00%2C99.80%2044.38%2C99.12%2043.75%2C98.75%2043.12%2C99.47%2042.50%2C99.40%2041.88%2C99.68%2041.25%2C99.59%2040.62%2C98.64%2040.00%2C99.47%2039.38%2C98.65%2038.75%2C98.72%2038.12%2C99.17%2037.50%2C99.64%2036.88%2C98.63%2036.25%2C99.31%2035.62%2C99.42%2035.00%2C99.55%2034.38%2C98.62%2033.75%2C99.31%2033.12%2C99.60%2032.50%2C99.33%2031.88%2C99.83%2031.25%2C99.13%2030.62%2C99.38%2030.00%2C99.59%2029.38%2C98.91%2028.75%2C98.84%2028.12%2C99.98%2027.50%2C99.25%2026.88%2C99.62%2026.25%2C98.69%2025.62%2C98.91%2025.00%2C99.66%2024.38%2C99.63%2023.75%2C99.78%2023.12%2C98.62%2022.50%2C99.59%2021.88%2C99.15%2021.25%2C99.34%2020.62%2C99.10%2020.00%2C99.15%2019.38%2C98.96%2018.75%2C99.83%2018.12%2C98.94%2017.50%2C99.58%2016.88%2C99.25%2016.25%2C99.53%2015.62%2C99.58%2015.00%2C99.26%2014.38%2C99.35%2013.75%2C99.49%2013.12%2C98.96%2012.50%2C99.17%2011.88%2C99.95%2011.25%2C99.65%2010.62%2C99.36%2010.00%2C98.72%209.38%2C98.76%208.75%2C99.24%208.12%2C99.98%207.50%2C98.91%206.88%2C99.40%206.25%2C99.19%205.62%2C99.01%205.00%2C99.11%204.38%2C99.33%203.75%2C98.72%203.12%2C99.46%202.50%2C99.45%201.88%2C98.81%201.25%2C99.72%200.62%2C99.58%200.00%2C98.84%200.00%2C100.00%27/%3E%3C/svg%3E")}
.comp-wide{left:0;bottom:-6vw;width:112vw}
.comp-wide .ink{aspect-ratio:1344/752;-webkit-mask-image:url(assets/ink-wide.svg);mask-image:url(assets/ink-wide.svg)}
/* the marker: from the chosen row across the paper to the fragment's torn edge */
.thread{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:1}
.thread path{fill:none;stroke:var(--signal);stroke-width:var(--sw);stroke-linejoin:round;stroke-linecap:round}
.thread .tick{transition:d .3s cubic-bezier(.2,.7,.2,1)}
.thread .guide{stroke:none}
.thread .dot{fill:var(--signal);opacity:0;transition:opacity .25s}
.marker{left:0;top:0;width:100%;height:100%;z-index:1}
.marker path{transition:d .45s cubic-bezier(.2,.7,.2,1)}
.journey{position:absolute;left:0;top:0;width:100%;height:0;z-index:1}
.journey .path{left:0;top:0}

main{position:relative;z-index:1}
section{position:relative}

.masthead{padding:34px var(--g) 0;display:flex;align-items:center;justify-content:flex-end;gap:48px;position:relative;z-index:2}
.wordmark{display:block;width:200px;height:auto}
.masthead nav{display:flex;gap:36px;font-size:22px}
.masthead nav a{position:relative;padding-bottom:6px}
.masthead nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.masthead nav a:hover::after,.masthead nav a:focus-visible::after,.masthead nav a[aria-current=true]::after{transform:scaleX(1)}

.hero{padding:120px var(--g) 0;min-height:min(74vh,780px);display:flex;justify-content:flex-end}
.hero-copy{width:min(620px,54%)}
.hero h1{font-size:clamp(84px,9.6vw,150px);line-height:.84;margin:26px 0 40px}
.dek{font-size:clamp(24px,2vw,30px);line-height:1.22;max-width:19em}
.stop{margin-top:60px;display:inline-block}

/* the list in the channel between the two forms */
.conversations{padding:150px var(--g) 120px}
.episodes{border-top:1px solid var(--fg);max-width:620px;position:relative;z-index:2}
.episode{display:grid;grid-template-columns:80px 1fr 28px;gap:16px;align-items:center;width:100%;background:none;border:0;border-bottom:1px solid var(--fg);padding:30px 0;color:var(--fg);text-align:left;position:relative}
.episode .num{font-family:Plex,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.episode[aria-pressed=true] .num{color:var(--signal-text)}
.who{font-style:italic;font-size:clamp(36px,3.6vw,54px);line-height:1.02}
.who small{display:block;font-style:normal;font-size:21px;margin-top:6px}
/* the audio accent, recovered from the earlier voice direction: the headline's dash continues as a waveform band that
   fills orange as the reader scrolls the first screen (and empties again on the way back up); reduced motion gets it full */
.hero{position:relative}
.voice-hero{position:absolute;height:120px;z-index:1;pointer-events:none;overflow:visible}
.voice-hero rect{fill:var(--fg);opacity:.22}
.voice-hero rect.on{fill:var(--signal);opacity:1}
/* a static sample waveform under the chosen conversation's name, orange, nothing else changes */
.who .wave{display:none;width:150px;height:14px;margin-top:12px}
.episode[aria-pressed=true] .who .wave{display:block}
.who .wave rect{fill:var(--signal)}
.wave-note{margin-top:14px;color:var(--muted)}
.arrow{font-size:24px;transition:color .2s}
.episode[aria-pressed=true] .arrow{color:var(--signal)}
.episode:hover .arrow,.episode:focus-visible .arrow{color:var(--signal)}
.credit{margin-top:50px;font-size:17px;line-height:1.45;max-width:30em}

/* field notes on the right of the paper; the seam crosses the quiet left */
.field{padding:56px var(--g) 48px;display:flex;justify-content:flex-end}   /* a modest strip until real notes exist; the first note can give it room back */
.field-copy{width:min(520px,54%)}
.field h2{font-size:clamp(56px,6vw,96px);margin-bottom:28px}
.lead{font-size:clamp(24px,2vw,30px);line-height:1.22;max-width:18em}

main>.subscribe{padding:60px var(--g) 40px}
.big-link{position:relative;display:inline-block;font-size:clamp(44px,5vw,78px);line-height:1;letter-spacing:-.02em;padding-bottom:16px;transition:color .2s}
.big-link:hover,.big-link:focus-visible{color:var(--signal)}
.note{font-size:12px;margin-top:20px;letter-spacing:.04em}

footer{padding:40px var(--g) 70vw;border-top:1px solid var(--fg);position:relative;z-index:1;overflow:clip}
footer>*:not(.comp){position:relative;z-index:2}
.foot-top{display:flex;justify-content:space-between;gap:30px}
.links{display:flex;flex-wrap:wrap;gap:20px 30px}
.podcast-links{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:32px;font-size:21px}
.podcast-links a{display:inline-flex;align-items:center;gap:6px}
.foot-top a{font-size:21px}
.foot-mark{display:block;margin:70px 0 0;width:min(62%,900px)}
.wordmark.big{width:100%}
footer .note{margin-top:26px}

@media(max-width:1000px){
  .comp-diag{width:120vw}
  .hero-copy{width:min(560px,60%)}
  .hero h1{font-size:clamp(72px,9vw,120px)}
  .comp-frag{height:min(calc(100% - 160px),63vw)}
  .episodes{max-width:62%}   /* rows and the thread's run down their edge stay clear of the fragment */
  .comp-diag{left:-72vw;width:116vw}   /* clear of the stacked header down to 651 px */
  .masthead nav{flex-wrap:wrap;row-gap:6px;justify-content:flex-end}
  .masthead nav .nav-break{display:block;flex:0 0 100%;height:0}
  /* Subscribe and the theme switch share the second row, right-aligned, so the links row stays short and clear of the hero mass */
  .foot-mark{width:80%}
}
@media(max-width:650px){
  :root{--g:24px}
  .masthead{padding-top:24px;display:block;text-align:right}
  .wordmark{width:200px;margin-left:auto}
  .masthead nav{font-size:18px;gap:18px;margin-top:18px;justify-content:flex-end;flex-wrap:wrap;row-gap:6px}
  .masthead nav a,.masthead nav .theme{white-space:nowrap}
  .masthead nav .nav-break{display:block;flex:0 0 100%;height:0}   /* on phones the switch takes its own row under the links, so the links keep their place clear of the hero mass */
  .masthead nav .theme{padding-top:8px;padding-bottom:8px}   /* natural width, a taller tap target */
  .comp-diag{left:-112vw;top:-34vw;width:172vw}
  .hero{padding-top:70px;min-height:0;display:block}
  .hero-copy{width:100%}
  .hero h1{font-size:clamp(70px,22vw,96px);margin:20px 0 26px}
  .dek{max-width:13em}
  .stop{margin-top:40px}
  .conversations{padding:100px 24px 80px}
  .comp-frag{right:-20vw;top:48px;width:40vw;height:auto}
  .comp-frag .ink{width:100%;height:auto} /* below the thread's entry on phones; narrower and further right so its ink clears the rows' arrow column (the rows end at 72% width) by 36 px or more */
  .episodes{max-width:72%}
  .episode{grid-template-columns:56px 1fr 22px;gap:10px;padding:22px 0}
  .who{font-size:32px}
  .who small{font-size:18px}
  .who .wave{width:120px;height:12px;margin-top:10px}
  .voice-hero{height:56px}
  .hero h1{margin-bottom:92px} /* room for the band under the headline on phones */
  .field{padding:44px 24px 36px;display:block}
  .field-copy{width:100%;padding-left:12vw}
  .field h2{font-size:clamp(42px,12.5vw,62px)}
  main>.subscribe{padding:30px 24px 40px}
  .big-link{font-size:clamp(36px,11vw,46px)}
  .foot-top{display:block}.links{margin:22px 0}
  .foot-mark{margin:52px 0 0 30px;width:80%}
  footer .note{max-width:54%;margin-left:30px}
  footer{padding-bottom:118vw}
  .comp-wide{width:180vw;bottom:-14vw}
}
@media(max-width:360px){.masthead nav{font-size:15px;gap:10px;padding-left:6vw}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* theme switch */
.nav-break{display:none}
.theme{font:inherit;font-size:inherit;background:none;border:0;padding:0 0 0 16px;margin:0;color:inherit;cursor:pointer;position:relative;letter-spacing:inherit}
.theme::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border:1.5px solid currentColor;border-radius:50%;box-sizing:border-box}
.theme[data-on=true]::before{background:var(--signal);border-color:var(--signal)}
/* Subscribe: the small solid-orange label (the approved corner-label accent) in the navigation; it anchors to the signup section, no popup, no new page.
   Fill: a slightly deeper orange scoped to this button only, #B83F1B, so paper type reads at 4.9:1 (the brand #C8471F gives 4.2:1 with paper or ink). The waveform, thread and dash keep the brand orange. */
.masthead nav{align-items:baseline}
.masthead nav .subscribe-nav{display:inline-block;font-style:italic;padding:7px 14px 8px;background:#B83F1B;color:var(--paper);font-size:.82em;line-height:1;border-radius:1px;transition:background .2s,color .2s}
.masthead nav .subscribe-nav::after{display:none}
.masthead nav .subscribe-nav:hover,.masthead nav .subscribe-nav:focus-visible{background:var(--fg);color:var(--bg)}
/* dark: the accessible orange text token as the fill with ink type (5.4:1). Phones: a taller tap target. */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .masthead nav .subscribe-nav{background:var(--signal-text);color:var(--ink)}}
:root[data-theme=dark] .masthead nav .subscribe-nav{background:var(--signal-text);color:var(--ink)}
:root[data-theme=dark] .masthead nav .subscribe-nav:hover,:root[data-theme=dark] .masthead nav .subscribe-nav:focus-visible{background:var(--fg);color:var(--bg)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .masthead nav .subscribe-nav:hover,:root:not([data-theme=light]) .masthead nav .subscribe-nav:focus-visible{background:var(--fg);color:var(--bg)}}
@media(max-width:650px){.masthead nav .subscribe-nav{padding:9px 14px 10px}}
#follow{scroll-margin-top:32px}
.sub-lead{margin:40px 0 24px;font-size:clamp(20px,1.6vw,26px);max-width:22em}


/* Keep the header logo and navigation on paper at intermediate desktop widths. */
@media(min-width:651px) and (max-width:1600px){.masthead{flex-direction:column;align-items:flex-end;gap:18px}.masthead nav{font-size:20px;column-gap:24px}}   /* column-gap, not gap: the tablet rows keep their 6px row gap */

/* Approved option C: custom trace + rock; SVG avoids platform emoji substitution. */
.oi-arrow{display:inline-block;width:.9em;height:.9em;min-width:24px;min-height:24px;vertical-align:-.08em;overflow:visible;flex:none}
.big-link .oi-arrow{margin-left:.08em}


/* ===== Wide-screen frame (16 Oct 2026). Below 1600 nothing here applies. ===== */
@media(min-width:1601px){
  /* the content frame: 1600 wide, centred, applied as side padding so the sections stay full-width boxes and their
     absolutely placed masses keep measuring from the viewport edge */
  .masthead,main>.hero,main>.conversations,main>.field,main>.subscribe,footer{padding-inline:calc(50vw - 800px + var(--g))}   /* sections only: the Kit form's inner div is also class "subscribe" */
  /* the hero mass travels with the frame and always bleeds off the left edge: the 1600 geometry up to 3270, then clamped */
  .comp-diag{left:min(0px, calc(-835px + 50vw - 800px))}
  /* the list fragment keeps its 1440 overhang in pixels, measured from the real screen edge */
  .comp-frag{right:-101px}
}
@media(min-width:1641px){
  /* the footer stops growing with the screen: the rocks stay full-bleed but are anchored by their top ridge and the page ends 1150px below the content */
  footer{padding-bottom:1150px}
  .comp-wide{bottom:auto;top:calc(100% - 1150px + 218px)}
}

/* Tablet footer: the loop passes 13 px from the wordmark between 651 and 900 px (22 px on phones, where the mark is inset 30 px). Inset it a little so the loop has the same room. */
@media(min-width:651px) and (max-width:900px){.foot-mark{margin-left:10px}}

/* Easter egg "Unsettled" (Unsettled.astro): a small Signal dot after the code of an episode released in the last 24 hours. */
.unsettled::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--signal);margin-left:7px;vertical-align:.12em}

/* Rail pages (rail.js): chapter ticks appear as the line passes them. */
/* branches off the rail (rail.js): each chapter's branch is drawn by the script in step with the line's tip, so it can
   never outlast the line it grows from. Only the archive's hover branch (.tick) animates on its own. */
.thread .rail-tick{stroke-dasharray:1 1.2;stroke-dashoffset:1;visibility:hidden}
.thread .tick.rail-tick{transition:stroke-dashoffset .22s ease-in,visibility 0s .22s}
.thread .tick.rail-tick.on{stroke-dashoffset:0;visibility:visible;transition:stroke-dashoffset .45s cubic-bezier(.3,.7,.2,1),visibility 0s}
@media(prefers-reduced-motion:reduce){.thread .tick.rail-tick,.thread .tick.rail-tick.on{transition:none}}