/* Two accents: pine for links and structure, amber (pulled from the
   sunset photos) for the numbers and highlights. */
:root{
  --paper:#f5f2ec; --raise:#faf8f3; --ink:#1c1a17; --body:#514b41; --muted:#6e675a;
  --line:#e0dacd; --accent:#2f5d50; --accent-soft:#e4ede9; --warm:#9a4f1c; --warm-soft:#f3e3d3;
  --serif:"Newsreader",Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme="dark"]{ --paper:#141310; --raise:#1c1a16; --ink:#ece7dc; --body:#c3bcac; --muted:#9b9485; --line:#2a2822; --accent:#77c3ac; --accent-soft:#1d2b26; --warm:#e2a56b; --warm-soft:#2e2318; }
:root[data-theme="light"]{ --paper:#f5f2ec; --raise:#faf8f3; --ink:#1c1a17; --body:#514b41; --muted:#6e675a; --line:#e0dacd; --accent:#2f5d50; --accent-soft:#e4ede9; --warm:#9a4f1c; --warm-soft:#f3e3d3; }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--body); font-family:var(--sans); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
a{color:inherit;}
.wrap{max-width:860px; margin:0 auto; padding:0 28px;}
@media (max-width:520px){ .wrap{padding:0 20px;} }

#progress{position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:50; transition:width .1s linear;}

/* ---------- nav ---------- */
/* Stays at the top while scrolling. The rule appears once the page has
   moved, so the bar sits flat on the hero at rest. */
.bar{position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:1px solid transparent; transition:border-color .3s ease;}
@supports (backdrop-filter:blur(1px)){ .bar{background:color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);} }
.bar.stuck{border-color:var(--line);}
nav{display:flex; align-items:center; justify-content:space-between; gap:16px; height:60px;}
nav .brand{font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--ink); text-decoration:none; white-space:nowrap;}
nav .brand b{color:var(--accent); font-weight:600;}
nav .brand .slot{display:inline-flex; height:1.3em; line-height:1.3em; overflow:hidden; will-change:transform;}
nav .brand .reel{display:flex; flex-direction:column; will-change:transform;}
nav .brand .reel span{height:1.3em;}
nav .links{display:flex; align-items:center; gap:22px; font-size:13px; letter-spacing:.02em;}
nav .links a{color:var(--muted); text-decoration:none; position:relative; transition:color .2s;}
nav .links a::after{content:""; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:var(--accent); transition:width .28s ease;}
nav .links a:hover, nav .links a.on{color:var(--ink);}
nav .links a:hover::after, nav .links a.on::after{width:100%;}
.theme{display:grid; place-items:center; width:30px; height:30px; margin-left:-4px; padding:0; border:1px solid var(--line); border-radius:50%;
  background:none; color:var(--muted); cursor:pointer; transition:color .2s,border-color .2s;}
.theme:hover{color:var(--ink); border-color:var(--ink);}
.theme svg{width:15px; height:15px;}
.theme .sun{display:none;}
.theme.dark .sun{display:block;} .theme.dark .moon{display:none;}
@media (max-width:440px){ nav .links{gap:14px; font-size:12.5px;} nav .links a[data-sec="about"]{display:none;} }

/* ---------- hero ---------- */
header{position:relative; padding:84px 0 80px; border-bottom:1px solid var(--line);}
/* Faint behind the text on the left, full strength where the lines meet. */
#streams{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.16) 30%,rgba(0,0,0,.42) 56%,#000 78%);
  mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.16) 30%,rgba(0,0,0,.42) 56%,#000 78%);}
@media (max-width:700px){ #streams{opacity:.7;} }
header .inner{position:relative; z-index:2;}
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 26px;}
header h1{font-family:var(--serif); font-weight:400; color:var(--ink); font-size:clamp(34px,5.6vw,54px); line-height:1.06; letter-spacing:-.022em; margin:0 0 28px; max-width:15em;}
header h1 em{font-style:italic; color:var(--accent);}
/* The habits are set back a step so what they are for leads. */
header h1 .then{color:var(--muted);}
/* line-height 1.06 makes the line box shorter than the descenders, so the
   mask that hides the rise animation was clipping the tails of g, p, and y.
   Pad the mask and pull the same amount back with a negative margin: the
   glyphs get room, the tight line spacing is unchanged. */
header h1 .ln{display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em;}
/* Must exceed mask height / span height (1.22 / 1.06 = 115%) or the padded
   area shows a sliver of the line before it rises. */
header h1 .ln > span{display:block; transform:translateY(125%); animation:rise .95s cubic-bezier(.22,1,.36,1) forwards;}
header h1 .ln:nth-child(2) > span{animation-delay:.09s;}
header h1 .ln:nth-child(3) > span{animation-delay:.18s;}
header h1 .ln:nth-child(4) > span{animation-delay:.27s;}
@keyframes rise{to{transform:translateY(0);}}
/* The four set lines only fit side by side on wider screens. On a phone
   the headline flows as one paragraph and fades in instead of rising. */
@media (max-width:560px){
  .kicker{font-size:11px; letter-spacing:.1em;}
  header h1{opacity:0; animation:fadein .9s ease .1s forwards;}
  header h1 .ln{display:inline; overflow:visible; padding:0; margin:0;}
  header h1 .ln > span{display:inline; transform:none; animation:none;}
}
.fadein{opacity:0; animation:fadein .9s ease .55s forwards;}
@keyframes fadein{to{opacity:1;}}
header .lede{max-width:50ch; font-size:18px; line-height:1.6; color:var(--body); margin:0 0 34px;}
.cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.btn{font-size:14px; letter-spacing:.01em; padding:12px 22px; border-radius:2px; text-decoration:none; transition:background .25s,color .25s,border-color .25s,transform .25s;}
.btn.solid{background:var(--ink); color:var(--paper); border:1px solid var(--ink);}
.btn.solid:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-2px);}
.btn.ghost{border:1px solid var(--line); color:var(--ink);}
.btn.ghost:hover{border-color:var(--ink); transform:translateY(-2px);}
/* What's on the bench right now. Keep it current or delete it. */
.status{display:flex; align-items:baseline; gap:10px; margin:30px 0 0; font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--muted); max-width:62ch;}
.status b{font-weight:400; color:var(--warm);}
.status .dot{position:relative; flex:none; width:7px; height:7px; border-radius:50%; background:var(--warm); top:-1px;}
.status .dot::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--warm); opacity:0; animation:ping 2.6s ease-out 1.6s infinite;}
@keyframes ping{0%{opacity:.7; transform:scale(.6);} 100%{opacity:0; transform:scale(1.6);}}

section{padding:74px 0; border-bottom:1px solid var(--line); scroll-margin-top:44px;}
.label{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 30px; display:flex; align-items:center; gap:14px;}
.label::after{content:""; flex:1; height:1px; background:var(--line);}
h2{font-family:var(--serif); font-weight:400; color:var(--ink); font-size:clamp(28px,3.8vw,36px); line-height:1.16; letter-spacing:-.018em; margin:0 0 22px; max-width:20ch;}
section p{max-width:62ch; font-size:16.5px; margin:0 0 18px;}
section p:last-child{margin-bottom:0;}
/* Inline links in prose. Underlined in the accent so they read as links
   without the default blue fighting the palette. */
section p a, .path a, .also dd a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent);
  transition:color .22s ease, border-color .22s ease;}
section p a:hover, .path a:hover, .also dd a:hover{color:var(--accent); border-color:var(--ink);}

/* ---------- featured work ---------- */
.feat{padding:0 0 64px; margin:0 0 64px; border-bottom:1px solid var(--line);}
.feat:last-child{padding-bottom:0; margin-bottom:0; border-bottom:none;}

/* Each project is its text beside a drawing of what it does, sides
   alternating down the page. The drawing sits on the page itself, not in
   a box. Illustrative, never real data: the report text and the poses
   are made up. */
.viz{margin:0;}
.viz svg{display:block; width:100%; height:auto;}
.viz .t{font-family:var(--sans); font-size:12.5px; fill:var(--body);}
.viz .m{font-family:var(--mono); font-size:10px; letter-spacing:.12em; fill:var(--muted);}
.viz .mv{font-family:var(--mono); font-size:11.5px; fill:var(--body);}
.viz .hl{fill:var(--warm); font-weight:600;}
.viz .acc{fill:var(--accent);}
.viz .warm{fill:var(--warm);}
.viz .card{fill:var(--paper); stroke:var(--line);}
.viz .chip{fill:var(--paper); stroke:var(--line);}
.viz .chip.end{stroke:var(--accent);}
.viz .rule{fill:var(--line);}
.viz .wire{fill:none; stroke:var(--muted); stroke-width:1;}
.viz .bone{fill:none; stroke:var(--muted); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.viz .bone.now{stroke:var(--accent); stroke-width:2.6;}
.viz .joint{fill:none; stroke:var(--warm); stroke-width:5.5; stroke-linecap:round;}
.viz .mark{fill:none; stroke:var(--accent); stroke-width:3.4; stroke-linecap:round;}
.viz .mark.soft{stroke-opacity:.45;}
.viz .trace{fill:none; stroke:var(--warm); stroke-width:1.4; stroke-dasharray:3 4;}
.viz .frame{fill:none; stroke:var(--line);}
.viz .zone{fill:none; stroke:var(--accent); stroke-dasharray:4 4;}
.viz .big{font-family:var(--serif); font-size:58px; letter-spacing:-.02em; fill:var(--accent);}
.viz .suit{font-family:var(--serif); fill:var(--warm);}

.split{display:grid; grid-template-columns:1fr 1fr; gap:0 44px; align-items:start;}
.split.flip .viz{order:-1;}
.split .viz{position:sticky; top:84px;}
.feat .text{min-width:0;}
.feat .meta{font-family:var(--mono); font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin-bottom:14px;}
.fig{display:block; font-family:var(--serif); font-size:36px; line-height:1; color:var(--warm); letter-spacing:-.02em; font-variant-numeric:lining-nums; white-space:nowrap;}
.figcap{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--body); line-height:1.45; margin:8px 0 14px;}
.feat .figcap{margin:0; flex-basis:100%; order:1;}
.feat .when{order:2;}
.feat .when > span + span::before{content:" \00b7  ";}
.feat .top{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:10px;}
.feat h3{font-family:var(--serif); font-weight:400; font-size:27px; line-height:1.2; color:var(--ink); margin:0; letter-spacing:-.012em;}
.feat h3 a, .card h3 a{text-decoration:none; transition:color .25s;}
.feat h3 a:hover, .card h3 a:hover{color:var(--accent);}
.feat h3 .arrow, .card h3 .arrow{display:inline-block; width:17px; height:17px; margin-left:6px; vertical-align:2px; color:var(--muted); transition:transform .3s,color .25s;}
.feat h3 a:hover .arrow, .card h3 a:hover .arrow{transform:translate(3px,-3px); color:var(--accent);}
.feat .text > p{margin:0 0 22px; color:var(--body); font-size:16px; max-width:60ch;}
.badge{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:2px 9px; white-space:nowrap;}
.badge.live::before{content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--accent); vertical-align:1px;}

/* How it works, as numbered steps keyed to numbered marks in the drawing.
   Hovering or focusing either side lights both and dims the rest. */
.steps{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.steps li{display:grid; grid-template-columns:22px 1fr; gap:0 14px; padding:13px 0; border-bottom:1px solid var(--line); font-size:15px; line-height:1.55; color:var(--body); cursor:default; outline:none;}
.steps b{display:block; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:2px;}
.steps .n{display:grid; place-items:center; width:20px; height:20px; margin-top:1px; border:1px solid var(--accent); border-radius:50%; font-family:var(--mono); font-size:10.5px; color:var(--accent); transition:background .2s,color .2s;}
.steps li.on .n{background:var(--accent); color:var(--paper);}
.steps li:focus-visible{box-shadow:inset 2px 0 0 var(--accent);}
.feat .note{margin:16px 0 0; font-size:14px; color:var(--muted);}
.feat .note b{font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--warm); margin-right:6px;}
.viz .mk circle{fill:var(--paper); stroke:var(--accent); stroke-width:1.2; transition:fill .2s;}
.viz .mk text{font-family:var(--mono); font-size:10.5px; fill:var(--accent); text-anchor:middle; transition:fill .2s;}
.viz .mk.on circle{fill:var(--accent);}
.viz .mk.on text{fill:var(--paper);}
.viz .step, .viz .mk{transition:opacity .25s ease;}
.split[data-on] .viz .step:not(.on), .split[data-on] .viz .mk:not(.on){opacity:.22;}

/* The side project closes the section lighter: a small drawing, no steps. */
.lite{display:grid; grid-template-columns:170px 1fr; gap:0 44px; align-items:center;}
.lite .text > p{margin-bottom:16px;}

@media (max-width:760px){
  .split{grid-template-columns:1fr; gap:28px;}
  .split .viz{position:static; order:-1; max-width:400px;}
  .lite{grid-template-columns:1fr; gap:20px;}
  .lite .viz{width:130px;}
  .fig{font-size:30px;}
}

/* Source to result, drawn as a row of stages. Connectors trail each stage,
   so a row that wraps ends on an arrow pointing at the next line. */
.flow{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 0;
  font-family:var(--mono); font-size:11.5px; line-height:1.4;}
.flow + .flow{margin-top:8px;}
.flow li{position:relative; color:var(--body); border:1px solid var(--line); border-radius:3px; padding:3px 9px; background:var(--paper);}
.flow li:not(:last-child){margin-right:26px;}
.flow li:not(:last-child)::before{content:""; position:absolute; right:-21px; top:50%; width:15px; height:1px; background:var(--muted);}
.flow li:not(:last-child)::after{content:""; position:absolute; right:-20px; top:calc(50% - 3px); width:5px; height:5px;
  border-top:1px solid var(--muted); border-right:1px solid var(--muted); transform:rotate(45deg);}
.flow li:last-child{color:var(--accent); border-color:var(--accent);}
.flow.plain li{border-color:transparent; padding-left:0; padding-right:0; color:var(--muted); background:none;}
.flow.plain li:not(:last-child){margin-right:18px;}
.flow.plain li:not(:last-child)::before{content:"\00b7"; background:none; width:auto; height:auto; right:-12px; top:50%; transform:translateY(-50%); line-height:1;}
.flow.plain li:not(:last-child)::after{display:none;}

/* ---------- photo band ---------- */
/* A strip of colour between the work and the words. Same column as
   everything else; on phones it scrolls sideways inside itself. */
.band{padding:44px 0 40px; border-bottom:1px solid var(--line);}
.band .strip{display:grid; grid-template-columns:1.25fr 1fr .62fr 1fr 1.25fr; gap:10px;}
.band .shot{margin:0;}
.band .shot img{height:190px; object-fit:cover;}
.band .foot{display:flex; justify-content:space-between; gap:16px; margin-top:14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--muted);}
.band .foot a{color:var(--accent); text-decoration:none;}
.band .foot a:hover{color:var(--ink);}
@media (max-width:700px){
  .band .strip{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 20px; margin:0 -20px; padding:0 20px; scrollbar-width:none;}
  .band .strip::-webkit-scrollbar{display:none;}
  .band .shot{flex:0 0 68%; scroll-snap-align:start;}
  .band .shot img{height:170px;}
  .band .foot span{display:none;}
}

/* ---------- about ---------- */
.about{display:grid; grid-template-columns:1fr 220px; gap:0 56px; align-items:start;}
@media (max-width:760px){ .about{grid-template-columns:1fr; gap:40px;} }
/* Bench to now, as a vertical line beside the prose. */
.path{list-style:none; margin:6px 0 0; padding:0;}
/* The headshot sits beside the heading, so the timeline column stays short. */
.hello{display:grid; grid-template-columns:104px 1fr; gap:0 26px; align-items:center; margin:0 0 24px;}
.hello h2{margin:0;}
.me{display:block; width:104px; height:104px; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 1px var(--line), 0 0 0 5px var(--paper), 0 0 0 6px var(--accent);}
@media (max-width:520px){ .hello{grid-template-columns:76px 1fr; gap:0 18px;} .me{width:76px; height:76px;} }
.path li{position:relative; padding:0 0 22px 26px;}
.path li:last-child{padding-bottom:0;}
.path li::before{content:""; position:absolute; top:6px; left:0; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--accent); background:var(--paper); box-sizing:border-box;}
.path li.now::before{background:var(--accent);}
.path li::after{content:""; position:absolute; top:19px; bottom:4px; left:4px; width:1px; background:var(--line);}
.path li:last-child::after{display:none;}
.path .when{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:4px;}
.path .what{display:block; font-family:var(--serif); font-size:19px; line-height:1.25; color:var(--ink); margin-bottom:4px; letter-spacing:-.005em;}
.path .how{display:block; font-size:14px; line-height:1.55; color:var(--body);}

/* ---------- more work ---------- */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:700px){ .cards{grid-template-columns:1fr;} }
.card{background:var(--raise); border:1px solid var(--line); border-radius:6px; padding:26px 26px 24px; display:flex; flex-direction:column;}
.card .fig{font-size:32px;}
.card .figcap{margin:8px 0 18px;}
.card .tag{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 14px;}
.card h3{font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.2; color:var(--ink); margin:0 0 10px; letter-spacing:-.01em;}
.card p{font-size:15px; margin:0 0 18px;}
.card .flow{margin-top:auto;}
.card .when{font-family:var(--mono); font-size:11.5px; color:var(--muted); margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line);}

.also{margin-top:48px;}
.sub{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:400; margin:0 0 20px;}
.also dl{margin:0; display:grid; grid-template-columns:1fr 1fr; gap:22px 32px;}
@media (max-width:640px){ .also dl{grid-template-columns:1fr;} }
.also dt{color:var(--ink); font-size:15.5px; margin-bottom:4px;}
.also dd{margin:0; font-size:14.5px; line-height:1.55; color:var(--body);}

.kit{margin-top:44px; padding-top:28px; border-top:1px solid var(--line);}
/* One row per kind of tool, each tool its own chip, so it scans. */
.kit dl{margin:0;}
.kit dl > div{display:grid; grid-template-columns:110px 1fr; gap:6px 20px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--line);}
.kit dl > div:last-child{border-bottom:none;}
.kit dt{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.kit dd{margin:0; display:flex; flex-wrap:wrap; gap:6px;}
.kit dd span{font-size:13.5px; line-height:1.4; color:var(--ink); background:var(--raise); border:1px solid var(--line); border-radius:999px; padding:3px 11px;}
@media (max-width:520px){ .kit dl > div{grid-template-columns:1fr;} }

/* ---------- contact ---------- */
.contact h2{margin-bottom:14px; max-width:none;}
.contact .links2{margin-top:26px; display:flex; flex-direction:column;}
.contact .links2 a{display:flex; align-items:center; gap:14px; padding:16px 0; border-top:1px solid var(--line); text-decoration:none; color:var(--ink); font-size:16px; transition:color .25s,padding-left .25s;}
.contact .links2 a:hover{color:var(--accent); padding-left:8px;}
.contact .links2 .ico{width:19px; height:19px; flex:none; color:var(--muted); transition:color .25s;}
.contact .links2 a:hover .ico{color:var(--accent);}
.contact .links2 .k{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); min-width:74px;}
.contact .links2 .v{flex:1; min-width:0; overflow-wrap:anywhere;}
.contact .links2 .ext{width:16px; height:16px; flex:none; color:var(--muted); transition:transform .25s,color .25s;}
.contact .links2 a:hover .ext{transform:translate(3px,-3px); color:var(--accent);}
.contact .links2 a[href^="mailto"]:hover .ext{transform:translateX(4px);}
@media (max-width:520px){ .contact .links2 .k{display:none;} }

/* ---------- photography ---------- */
/* Sits in the same column as everything else. An earlier full-bleed
   version read as a different page. */
/* Seven frames on a fixed grid rather than masonry columns, which split
   them 3, 2, 2. Wide frame and one on top, three across, one and a wide
   frame below. A wide frame is cropped to its row's height; the lightbox
   still shows it whole. */
.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px;}
.gal .shot{margin:0;}
.gal .shot img{aspect-ratio:3/2; object-fit:cover;}
.gal .shot.wide{grid-column:span 2;}
/* Out of flow, so the row takes its height from the 3:2 frame beside it. */
.gal .shot.wide img{position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto;}
@media (max-width:760px){
  .gal{grid-template-columns:1fr 1fr;}
  .gal .shot:nth-child(6){grid-column:span 2;}
  .gal .shot:nth-child(6) img{aspect-ratio:2/1;}
  .gal .shot.wide img{position:static; aspect-ratio:2/1;}
}
@media (max-width:480px){
  .gal{grid-template-columns:1fr;}
  .gal .shot:nth-child(6), .gal .shot.wide{grid-column:auto;}
  .gal .shot img, .gal .shot:nth-child(6) img, .gal .shot.wide img{aspect-ratio:3/2;}
}
.shot{display:block; width:100%; break-inside:avoid; margin:0 0 14px; padding:0; border:none;
  background:none; cursor:zoom-in; position:relative; overflow:hidden; border-radius:3px; line-height:0;}
.shot img{width:100%; height:auto; display:block; filter:saturate(.96);
  transition:transform .7s cubic-bezier(.22,1,.36,1), filter .45s ease;}
.shot:hover img, .shot:focus-visible img{transform:scale(1.04); filter:saturate(1.08);}
.shot .cap{position:absolute; left:0; right:0; bottom:0; padding:34px 14px 12px; text-align:left;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; line-height:1.45; opacity:0; transform:translateY(6px);
  background:linear-gradient(transparent,rgba(0,0,0,.7));
  transition:opacity .35s ease, transform .35s ease;}
.shot .cap .ex, #lb .ex{display:block; text-transform:none; letter-spacing:.04em; color:rgba(255,255,255,.66); margin-top:3px;}
.shot:hover .cap, .shot:focus-visible .cap{opacity:1; transform:none;}
.band .shot .cap .ex{display:none;}

/* ---------- lightbox ---------- */
#lb{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
  background:rgba(10,9,7,.95); padding:30px 18px 84px;}
#lb.open{display:flex;}
#lb .frame{max-width:100%; max-height:100%; display:flex; align-items:center; justify-content:center;}
#lb img{max-width:100%; max-height:78vh; width:auto; height:auto; display:block; border-radius:2px;
  box-shadow:0 26px 80px rgba(0,0,0,.55);}
#lb .lbcap{position:absolute; left:0; right:0; bottom:22px; margin:0; text-align:center; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.74);}
#lb .lbcap .of{color:rgba(255,255,255,.4); margin-left:10px;}
#lb .ex{color:rgba(255,255,255,.5); margin-top:5px;}
#lb button{position:absolute; background:none; border:none; color:rgba(255,255,255,.62); cursor:pointer;
  padding:14px; transition:color .2s ease; line-height:0;}
#lb button:hover{color:#fff;}
#lb button:focus-visible{outline:2px solid #fff; outline-offset:2px; border-radius:2px;}
#lb svg{width:26px; height:26px;}
#lb .close{top:14px; right:16px;}
#lb .prev{left:8px; top:50%; margin-top:-27px;}
#lb .next{right:8px; top:50%; margin-top:-27px;}
@media (max-width:560px){ #lb .prev{left:0;} #lb .next{right:0;} #lb svg{width:22px; height:22px;} }
body.noscroll{overflow:hidden;}

/* ---------- the thread ---------- */
/* The hero's output line carried on down the right margin. SVG laid over
   the page, under the content, so it scrolls with it. Wide screens only.
   Each node is named for its section and jumps to it on click. */
#thread{position:absolute; top:0; left:0; width:100%; z-index:-1; pointer-events:none; overflow:hidden;}
body:not(.threaded) #thread{display:none;}
body.threaded #progress{display:none;}
#thread svg{position:absolute; top:0; left:0;}
#thread .trib{fill:none; stroke:url(#thread-fade); stroke-opacity:.13;}
/* A pulse is two dashes on a copy of the stream: a long faint tail and a
   short bright head, moving together. pathLength=1000 makes the dash
   units the same on every stream. */
#thread .tp{fill:none; stroke:url(#thread-fade); stroke-linecap:round; animation:tp linear infinite paused;}
#thread .tp.a{stroke-width:1.4; stroke-opacity:.22; stroke-dasharray:60 1000;}
#thread .tp.b{stroke-width:1.5; stroke-opacity:.55; stroke-dasharray:18 1000; animation-name:tpb;}
#thread .live .tp{animation-play-state:running;}
@keyframes tp{from{stroke-dashoffset:60;} to{stroke-dashoffset:-1000;}}
@keyframes tpb{from{stroke-dashoffset:18;} to{stroke-dashoffset:-1042;}}
/* Straight branches: the section's rule carried across to the thread. The
   dashes are longer because the line is shorter than a fan stream. */
#thread .branch{stroke:var(--line);}
#thread .tp.straight{stroke:var(--accent); animation-name:tpl;}
#thread .tp.straight.a{stroke-opacity:.35; stroke-dasharray:140 1000;}
#thread .tp.straight.b{stroke-opacity:.85; stroke-dasharray:34 1000; animation-name:tplb;}
@keyframes tpl{from{stroke-dashoffset:140;} to{stroke-dashoffset:-1000;}}
@keyframes tplb{from{stroke-dashoffset:34;} to{stroke-dashoffset:-1106;}}
#thread .spine{stroke:var(--accent); stroke-opacity:.22;}
#thread .lit{stroke:var(--accent); stroke-opacity:.6; stroke-width:1.5;}
#thread .node{fill:var(--paper); stroke:var(--accent); stroke-width:1.5; transition:fill .5s ease;}
#thread .node.on{fill:var(--accent);}
#thread .ring{fill:none; stroke:var(--accent); opacity:0; transform-box:fill-box; transform-origin:center;}
#thread .end{fill:var(--accent); fill-opacity:.9;}
#thread .endring{fill:none; stroke:var(--accent); stroke-opacity:.28;}
#thread .name{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; fill:var(--muted); transition:fill .25s;}
#thread .stop{pointer-events:auto; cursor:pointer;}
#thread .stop .hit{fill:transparent;}
#thread .stop:hover .name, #thread .stop.here .name{fill:var(--accent);}
#thread .sp{position:absolute; top:0; width:1.4px; height:60px; margin-left:-.7px; opacity:0;
  background:linear-gradient(to bottom,transparent,var(--accent)); will-change:transform,opacity;}
#thread .sp::after{content:""; position:absolute; left:50%; bottom:-1.6px; width:3.2px; height:3.2px; margin-left:-1.6px; border-radius:50%; background:var(--accent);}

footer{padding:36px 0 64px; font-family:var(--mono); font-size:12px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

a:focus-visible, .btn:focus-visible, .theme:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;}
.theme:focus-visible{border-radius:50%;}

/* Visible to screen readers only. Announces links that open a new tab. */
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1; transform:none;}
/* Section labels fade without sliding, so each rule stays level with the
   branch that carries it across to the thread. */
.label.reveal{transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  header h1, header h1 .ln > span{opacity:1; transform:none; animation:none;}
  .fadein{opacity:1; animation:none;}
  .status .dot::after{animation:none;}
  .shot img{transition:none;}
  .shot:hover img, .shot:focus-visible img{transform:none;}
  .shot .cap{transition:none;}
}