:root{
  --forest:#0F2B1F;
  --canopy:#173A2A;
  --chartreuse:#D6FF3F;
  --limestone:#EEE8D8;
  --ink:#14201A;
  --sage:#A9BDAE;
  --stone:#5F6A5F;
  --rule-dark:rgba(238,232,216,.16);
  --rule-light:rgba(20,32,26,.16);
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --text:"Newsreader",Georgia,serif;
  --measure:62ch;
  --pad:clamp(1.25rem,4vw,4rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:4.5rem}
body{margin:0;background:var(--forest);color:var(--limestone);font-family:var(--text);font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);line-height:1.6;font-optical-sizing:auto}
img,video{max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:focus-visible,button:focus-visible,video:focus-visible{outline:3px solid var(--chartreuse);outline-offset:3px;border-radius:2px}
.light a:focus-visible,.contact a:focus-visible{outline-color:var(--forest)}
h1,h2,h3{font-family:var(--display);margin:0;font-weight:700;line-height:1.02}
h2{font-size:clamp(2rem,1.3rem + 3.4vw,4.25rem);font-stretch:82%;letter-spacing:-.02em;max-width:16ch}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.5rem);font-stretch:90%;letter-spacing:-.01em;line-height:1.15}
p{margin:0 0 1em;max-width:var(--measure)}
.skip{position:absolute;left:-999px;top:0;background:var(--chartreuse);color:var(--forest);padding:.6rem 1rem;font-family:var(--display);font-weight:600}
.skip:focus{left:var(--pad);top:.75rem;z-index:20}

/* top bar */
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem 1.5rem;padding:1.25rem var(--pad);font-family:var(--display);font-size:.95rem}
.bar .me{font-weight:700;text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.bar nav{display:flex;gap:.35rem 1.5rem}
.bar nav a{text-decoration:none;color:var(--sage);padding-bottom:.2rem;border-bottom:2px solid transparent;white-space:nowrap}
.bar nav a:hover{color:var(--chartreuse)}
.bar nav a[aria-current]{color:var(--limestone);border-bottom-color:var(--chartreuse)}

/* home hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,4.5rem);align-items:end;padding:clamp(1rem,2.5vw,2.25rem) var(--pad) 0}
.hero>div{container-type:inline-size}
.hero h1{font-size:min(14.6vw,15rem);font-size:min(29cqw,16.5rem);font-weight:800;font-stretch:75%;letter-spacing:-.018em;line-height:.86;margin-left:-.03em}
.hero h1 span{display:block}
.hero .lede{font-family:var(--display);font-size:clamp(1.3rem,1.05rem + 1.3vw,2.2rem);font-weight:400;font-stretch:92%;line-height:1.2;letter-spacing:-.015em;max-width:26ch;margin:clamp(1.5rem,3vw,2.75rem) 0 0}
.hero .origin{color:var(--sage);font-style:italic;margin:.9rem 0 0}
.hero .go{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;margin-top:clamp(1.25rem,2.5vw,2rem);font-family:var(--display)}
.loop{margin:0;height:min(70vh,39rem);aspect-ratio:9/16;background:#1b1b1b;border-radius:4px;overflow:hidden}
.loop video{display:block;width:100%;height:100%;object-fit:cover}

/* route strip */
.strip{padding:clamp(2.5rem,5vw,4.5rem) var(--pad) clamp(2.5rem,5vw,4.5rem)}
.strip ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.strip ol::before{content:"";position:absolute;left:0;right:0;top:.45rem;height:2px;background:var(--chartreuse)}
.strip li{position:relative;padding-top:1.6rem;padding-right:1rem}
.strip li::before{content:"";position:absolute;left:0;top:0;width:1rem;height:1rem;border-radius:50%;background:var(--forest);border:2px solid var(--chartreuse)}
.strip li:last-child::before{background:var(--chartreuse)}
.strip a{text-decoration:none;display:block}
.strip a:hover .city{color:var(--chartreuse)}
.strip .city{font-family:var(--display);font-weight:700;font-stretch:85%;font-size:clamp(1.05rem,.9rem + 1vw,1.75rem);letter-spacing:-.01em;display:block;line-height:1.1}
.strip .yrs{color:var(--sage);font-size:.92em;display:block;margin-top:.2rem}

/* bands */
.band{padding:clamp(3.5rem,8vw,7rem) var(--pad)}
.light{background:var(--limestone);color:var(--ink)}
.canopy{background:var(--canopy)}
.head{display:grid;gap:1rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.head p{color:var(--sage);margin:0}
.light .head p{color:var(--stone)}
.more{font-family:var(--display);color:var(--chartreuse);display:inline-block;margin-top:clamp(1.5rem,3vw,2.5rem)}
.light .more{color:var(--forest);font-weight:600}
.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:1.05rem;text-decoration:none;background:var(--chartreuse);color:var(--forest);padding:.9rem 1.5rem;border-radius:999px}
.btn:hover{background:var(--limestone)}

/* page heads */
.pagehead{padding:clamp(1.5rem,4vw,3.5rem) var(--pad) clamp(2.5rem,5vw,4.5rem)}
.pagehead h1{font-size:clamp(3.4rem,1.6rem + 9.5vw,11rem);font-weight:800;font-stretch:75%;letter-spacing:-.02em;line-height:.9;margin-left:-.03em}
.pagehead p{font-family:var(--display);font-size:clamp(1.15rem,1rem + .8vw,1.7rem);font-stretch:92%;line-height:1.25;letter-spacing:-.01em;color:var(--sage);max-width:34ch;margin:clamp(1rem,2vw,1.75rem) 0 0}

/* about block and facts */
.about{display:grid;gap:clamp(2rem,5vw,5rem);grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
.voice p:first-child{font-size:1.28em;line-height:1.38}
.facts{margin:0;border-top:2px solid var(--ink)}
.facts div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--rule-light)}
.facts dt{font-family:var(--display);font-weight:600;font-size:.92em}
.facts dd{margin:0}

/* figures */
figure{margin:0}
figure img,figure video{display:block;border-radius:3px;background:#22382c}
.light figure img,.light figure video{background:#d9d2bf}
figcaption{font-family:var(--display);font-size:.82rem;color:var(--sage);margin-top:.45rem;line-height:1.3}
.light figcaption{color:var(--stone)}
figure a{display:block}

/* home: selected work */
.lead{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.25rem,4vw,4rem);align-items:end;padding-bottom:clamp(2rem,4vw,3.5rem);border-bottom:1px solid var(--rule-dark);margin-bottom:clamp(2rem,4vw,3.5rem)}
.lead img,.pair img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:3px;display:block}
.lead h3,.pair h3{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.75rem);font-stretch:80%;letter-spacing:-.02em;line-height:1}
.lead h3 a,.pair h3 a{text-decoration:none}
.lead h3 a:hover,.pair h3 a:hover{color:var(--chartreuse)}
.lead p,.pair p{margin:.8rem 0 0}
.where{color:var(--sage);font-size:.93em}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,4vw,4rem)}
.pair h3{margin-top:1.1rem;font-size:clamp(1.4rem,1.1rem + 1.2vw,2.1rem)}

/* home: on camera teaser, and the on camera page */
.reel{display:grid;grid-template-columns:minmax(0,1.15fr) repeat(3,minmax(0,1fr));gap:clamp(.9rem,2vw,1.75rem);align-items:start}
.reel .say p{color:var(--sage)}
.clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem) clamp(.9rem,2vw,1.75rem)}
.clip video{width:100%;height:auto}
.clip h3{margin-top:.9rem}
.clip p{margin:.4rem 0 0;color:var(--sage);font-size:.95em}

/* work page */
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:1rem clamp(1.5rem,4vw,5rem);padding:clamp(2rem,4vw,3.5rem) 0;border-top:1px solid var(--rule-dark)}
.case h2{font-size:clamp(1.7rem,1.2rem + 2.2vw,3.1rem);font-stretch:80%;max-width:14ch}
.case .where{margin:.8rem 0 0}
.case .body p{margin:0}
.src{display:inline-block;margin-top:.7rem;color:var(--chartreuse);font-family:var(--display);font-size:.95em}
.film-strip{grid-column:1/-1;display:flex;gap:.9rem;overflow-x:auto;padding:.5rem 0 .75rem;margin-top:.75rem;scrollbar-color:var(--sage) transparent}
.film-strip figure{flex:0 0 auto;display:table}
.film-strip figcaption{display:table-caption;caption-side:bottom}
.film-strip img,.film-strip video{height:clamp(13rem,22vw,19rem);width:auto;max-width:none}

/* journey */
.chapters{position:sticky;top:0;z-index:5;display:flex;gap:.4rem 1.75rem;overflow-x:auto;padding:.85rem var(--pad);background:var(--limestone);color:var(--ink);border-bottom:1px solid var(--rule-light);font-family:var(--display);font-size:.95rem;white-space:nowrap}
.chapters a{text-decoration:none;color:var(--stone)}
.chapters a:hover{color:var(--forest);text-decoration:underline}
.chapter{padding:clamp(2.5rem,6vw,5rem) var(--pad);border-bottom:2px solid var(--ink)}
.chapter:last-of-type{border-bottom:0}
.leg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:1rem clamp(1.5rem,4vw,5rem)}
.place h2{font-size:clamp(2.6rem,1.4rem + 5vw,6rem);font-stretch:76%;font-weight:800;letter-spacing:-.03em;line-height:.92}
.place span{color:var(--stone);display:block;margin-top:.45rem;font-family:var(--display)}
.role{padding:0 0 1.6rem;margin:0 0 1.6rem;border-bottom:1px solid var(--rule-light)}
.role:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.role .when{color:var(--stone);font-size:.93em;margin:.25rem 0 .7rem}
.role ul{margin:0;padding-left:1.1em;max-width:var(--measure)}
.role li{margin-bottom:.35em}
.role li::marker{color:var(--stone)}
.minor{margin:0;padding:0;list-style:none}
.minor li{padding:.55rem 0;border-bottom:1px solid var(--rule-light)}
.minor li:last-child{border-bottom:0}
.minor strong{font-family:var(--display);font-weight:600}
.film{margin-top:clamp(1.75rem,4vw,3rem);max-width:60rem}
.film video{width:100%;height:auto}
.wall{columns:4 15rem;column-gap:.9rem;margin-top:clamp(1.75rem,4vw,3rem)}
.wall figure{break-inside:avoid;margin:0 0 1.1rem}
.wall img,.wall video{width:100%;height:auto}

/* words */
.said{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
blockquote{margin:0}
blockquote p{font-family:var(--display);font-weight:700;font-stretch:80%;font-size:clamp(2.1rem,1.2rem + 4.2vw,5.25rem);line-height:.98;letter-spacing:-.03em;color:var(--chartreuse);max-width:13ch;margin:0}
blockquote footer{margin-top:1.5rem;max-width:44ch;color:var(--limestone)}
.others{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-dark)}
.others li{padding:1.1rem 0;border-bottom:1px solid var(--rule-dark)}
.others h3{margin-bottom:.35rem}
.others p{margin:0;color:var(--sage)}
.others a,blockquote a{color:var(--chartreuse)}

/* about page */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,4.5rem);align-items:end;padding:0 var(--pad) clamp(3rem,6vw,5rem)}
.intro img{width:100%;height:auto;border-radius:3px;display:block}
.intro .two{display:grid;grid-template-columns:1.55fr 1fr;gap:.9rem;align-items:end}
.ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,5vw,5rem) clamp(2rem,5vw,5rem)}
.ledger h3{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.4rem);font-stretch:82%;letter-spacing:-.02em;padding-bottom:.8rem;border-bottom:2px solid var(--ink);margin-bottom:.2rem}
.ledger ul{list-style:none;margin:0;padding:0}
.ledger li{padding:.75rem 0;border-bottom:1px solid var(--rule-light)}
.ledger li strong{font-family:var(--display);font-weight:600}
.ledger li span{color:var(--stone)}
.row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
.row4 img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;max-width:62rem}
.row3 img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}

/* contact and footer */
.contact{background:var(--chartreuse);color:var(--forest);padding:clamp(3.5rem,8vw,7rem) var(--pad)}
.contact h2{max-width:14ch}
.contact p{margin:1.25rem 0 2rem;max-width:40ch}
.contact .btn{background:var(--forest);color:var(--chartreuse)}
.contact .btn:hover{background:var(--ink)}
.end{padding:1.5rem var(--pad) 2.5rem;color:var(--sage);font-family:var(--display);font-size:.88rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between}
.end nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.end a{text-decoration:none}
.end a:hover{color:var(--chartreuse)}

/* zoom dialog */
dialog.zoom{border:0;padding:0;background:transparent;max-width:min(94vw,80rem);max-height:94vh;color:var(--limestone)}
dialog.zoom::backdrop{background:rgba(8,20,14,.92)}
dialog.zoom img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;margin:0 auto;border-radius:3px;background:none}
dialog.zoom figcaption{color:var(--limestone);font-size:.95rem;margin-top:.7rem;text-align:center}
dialog.zoom .x{position:fixed;top:1rem;right:1rem;font-family:var(--display);font-weight:600;font-size:.95rem;background:var(--chartreuse);color:var(--forest);border:0;border-radius:999px;padding:.55rem 1.1rem;cursor:pointer}

@media (max-width:900px){
  .reel{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reel .say{grid-column:1/-1}
}
@media (max-width:820px){
  .bar{flex-wrap:wrap}
  .bar nav{width:100%;overflow-x:auto;gap:.85rem;font-size:.86rem;padding-bottom:.2rem;scrollbar-width:none}
  .bar nav::-webkit-scrollbar{display:none}
  .hero{grid-template-columns:1fr;align-items:start}
  .hero h1{font-size:min(23.4vw,11rem);font-size:min(29cqw,11rem)}
  .loop{height:auto;width:min(62vw,17rem)}
  .about,.said,.ledger,.lead,.pair,.case,.leg,.intro{grid-template-columns:1fr}
  .lead{align-items:start}
  .strip ol{grid-template-columns:1fr;gap:1.1rem}
  .strip ol::before{left:.45rem;right:auto;top:0;bottom:0;width:2px;height:auto}
  .strip li{padding:0 0 0 1.9rem}
  .facts div{grid-template-columns:1fr;gap:.1rem}
  .clips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall{columns:2 9rem}
  .case{gap:.75rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* heading levels that keep the h3 look */
h2.h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.5rem);font-stretch:90%;letter-spacing:-.01em;line-height:1.15;max-width:none}
.clip h2{font-size:clamp(1.15rem,1.05rem + .5vw,1.5rem);font-stretch:90%;letter-spacing:-.01em;line-height:1.15;max-width:none;margin-top:.9rem}
.ledger h2.h3{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.4rem);font-stretch:82%;letter-spacing:-.02em;padding-bottom:.8rem;border-bottom:2px solid var(--ink);margin-bottom:.2rem}
.others h2.h3{margin-bottom:.35rem}